我使用的是键盘操作3.1.2 https://pub.dev/packages/keyboard_actions 当键盘出现在屏幕上时,我的文本字段正在隐藏。我在iOS上附了三张我的问题图片,你可以看到
一个要求输入号码的弹出 当我输入数字时,我的文本框是不可见的。-键盘出现在屏幕上 一旦我点击完成,我的文本就会出现。-键盘关闭 弹出我使用的是无状态小部件。下面是我的代码。
FocusNode _nodeText1 = FocusNode();
KeyboardActionsConfig _buildConfig(BuildContext context) {
return KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
keyboardBarColor: Colors.grey[200],
nextFocus: true,
actions: [
KeyboardAction(
focusNode: _nodeText1,
closeWidget: Padding(
padding: EdgeInsets.all(5.0),
child: Text(
"CLOSE",
style: TextStyle(color: Colors.black, fontSize: 14),
),
),
),
],
);}
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Consts.padding),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: Container(
height: MediaQuery.of(context).size.height / 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Consts.padding),
color: Colors.white,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Container(
width: MediaQuery.of(context).size.width / 3,
height: 40,
//padding: EdgeInsets.all(10.0),
child: KeyboardActions(
config: _buildConfig(context),
child: TextField(
textAlign: TextAlign.center,
// controller: oTPInputController,
style: TextStyle(
fontSize: 14.0,
color: Theme.of(context).primaryColorDark,
fontWeight: FontWeight.bold,
),
keyboardType: TextInputType.number,
focusNode: _nodeText1,
decoration: InputDecoration(
hintText: "Input Number",
hintStyle: TextStyle(
fontSize: 14.0,
color: Theme.of(context).primaryColorDark),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColorDark),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColorDark),
),
),
),
),
),
),
],
),
),
);} [1.弹出,要求输入数字][1][2.我正在键入我的文本框不可见的数字][2][3.一旦单击“完成”,我的文本就会出现][3][1]:https://i.stack.imgur.com/yHNw4.png [2]: https://i.stack.imgur.com/PCjoV.png [3]: https://i.stack.imgur.com/68NRV.png
提前谢谢。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
根据你的描述和代码,问题可能是由于键盘遮挡了输入框导致的。在Flutter中,处理键盘遮挡输入框的问题通常可以通过包裹你的界面主体内容(在这个情况下是Dialog的内容)使用SingleChildScrollView
, ListView
, 或者调整页面布局以适应键盘弹出。对于Dialog而言,确保其大小能自适应或者手动调整以避免被键盘遮挡是很重要的。
这里提供一个修改你代码的建议,尝试将你的Column包裹在一个 SingleChildScrollView 中,并且给Dialog设置一个明确的高度,让其能够滚动,从而避免输入框被键盘遮盖:
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Consts.padding),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: Container(
height: MediaQuery.of(context).size.height / 3, // 可考虑是否需要动态计算高度以适应不同屏幕
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Consts.padding),
color: Colors.white,
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
// ... 你的其他widgets ...
],
),
),
),
);
}
请注意,直接设置固定高度可能在某些设备上不理想,因为屏幕尺寸和键盘高度会变化。为了更灵活地适应各种屏幕和键盘情况,你可以考虑使用MediaQuery来动态计算Dialog的高度,或者利用LayoutBuilder
来获取可用空间并据此调整布局。
如果上述方法仍不能解决问题,你可能需要探索使用第三方库如flutter_screenutil
来帮助你更好地管理界面元素的大小和位置,使其能自动适应不同的屏幕尺寸和键盘状态。