开发者社区 问答 正文

使用键盘_action包显示键盘时,TextField收缩/滚动

我使用的是键盘操作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

提前谢谢。

展开
收起
游客5akardh5cojhg 2019-12-16 22:26:21 528 分享 版权
阿里云 AI 助理回答

根据你的描述和代码,问题可能是由于键盘遮挡了输入框导致的。在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来帮助你更好地管理界面元素的大小和位置,使其能自动适应不同的屏幕尺寸和键盘状态。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答
问答分类:
问答地址: