嗨！这里是甜瓜看代码，我们来聊聊如何避免你的用户在键盘弹起时受到惊吓。
我们都知道，在Flutter中，可以通过TextField或TextFormField来实现文本输入框。但是，这些输入框与键盘之间的交互可能会导致一些棘手的问题，例如键盘覆盖输入框、滚动问题等等。下面是一些有用的技巧，可以帮助你处理这些问题。
避免键盘遮挡输入框
首先，让我们来看看如何避免键盘覆盖输入框。一个常见的做法是使用SingleChildScrollView，它可以让整个页面滚动，并确保焦点在输入框上方。但是，这种方法可能会导致一些其他问题，例如键盘关闭后页面无法回到原始位置等等。
幸运的是，Flutter提供了一个非常好用的组件——ListView，它可以自动处理滚动。所以，如果你需要在页面上放置多个输入框，那么使用ListView是一个不错的选择。下面是一个简单的示例：
ListView(children: [ TextField(decoration: InputDecoration(hintText: 'Enter your name',),), TextField(decoration: InputDecoration(hintText: 'Enter your email',),), TextField(decoration: InputDecoration(hintText: 'Enter your password',),),],)复制代码当你在任何一个输入框中获取焦点时，键盘会自动弹起并将该输入框放在键盘上方。当你关闭键盘时，页面会自动滚动回原始位置。
在键盘弹起时自动滚动
上面的方法可以解决键盘覆盖输入框的问题，但如果你的页面很长，那么当键盘弹起时，你可能需要手动滚动到焦点所在的位置。在这种情况下，使用ScrollController会非常有用。
final controller = ScrollController();ListView(controller: controller, children: [ TextField(decoration: InputDecoration(hintText: 'Enter your name',),), TextField( decoration: InputDecoration(hintText: 'Enter your email',),), TextField( decoration: InputDecoration(hintText: 'Enter your password',),), ],)复制代码当你在任何一个输入框中获取焦点时，你可以通过以下代码来自动滚动到该输入框所在的位置：
controller.animateTo( _textFieldOffset(textField), // 计算输入框的位置 duration: Duration(milliseconds: 500), curve: Curves.easeInOut,);复制代码其中_textFieldOffset是一个辅助函数，用于计算输入框在ListView中的位置。
禁用键盘
有时你可能希望禁用键盘，在这种情况下，可以使用FocusNode和RawKeyboardListener来实现。下面是一个简单的示例：
final focusNode = FocusNode();RawKeyboardListener( focusNode: focusNode, onKey: (event) { if (event.logicalKey == LogicalKeyboardKey.enter) { // 禁用回车键 return KeyEventResult.handled; } else { // 允许其他键 return KeyEventResult.ignored; } }, child: TextField( focusNode: focusNode, decoration: InputDecoration( hintText: 'Type something...', ), ),);复制代码在上面的示例中，我们创建了一个FocusNode并将其与TextField和RawKeyboardListener一起使用。RawKeyboardListener可以捕获所有按键事件，然后我们可以根据需要进行处理。在这个示例中，我们禁用了回车键，但允许其他键。
自定义键盘
最后，让我们来看看如何自定义键盘。如果你希望在某些情况下使用不同于系统键盘的键盘，那么可以使用GestureDetector和Overlay来实现。下面是一个示例：
final overlayEntry = OverlayEntry( builder: (context) => Positioned( bottom: 0, left: 0, right: 0, child: Container( height: 200, color: Colors.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton( onPressed: () {}, child: Text('1'), ), ElevatedButton( onPressed: () {}, child: Text('2'), ), ElevatedButton( onPressed: () {}, child: Text('3'), ), ], ), ), ),);GestureDetector( onTap: () { // 显示自定义键盘 Overlay.of(context)!.insert(overlayEntry); }, child: TextField( decoration: InputDecoration( hintText: 'Type something...', ), ),);复制代码在上面的示例中，我们创建了一个OverlayEntry并将其放置在GestureDetector中。当你点击文本框时，自定义键盘会出现在底部。你可以根据自己的需要修改键盘的布局和样式。
希望这篇文章可以帮助你更好地处理键盘相关的问题。如果你还有其他问题或需要更多的帮助，请随时在评论区留言！这里是甜瓜看代码，期待你的关注！
来源地址：https://blog.csdn.net/m0_69656288/article/details/130395179
