【问题标题】:How to move textfields above a button which moves up with keyboard in flutter如何将文本字段移动到随键盘向上移动的按钮上方
【发布时间】:2021-01-30 05:12:28
【问题描述】:

我有一个与屏幕底部对齐的按钮,这样无论何时打开键盘,该按钮都会保持在键盘上方的位置。此按钮隐藏包含在 singlechildscrollview 内的列中的文本字段。

(TextFields 使用键盘向上移动。堆叠在列上方的按钮导致问题)

Image before opening keyboard

Image after opening keyboard

我尝试在 Padding 小部件中包装列并给出底部填充,但结果仍然相同。请提出一种将文本字段放置在按钮上方的方法。

注意:第一次海报。如有错误请见谅。谢谢你

return SafeArea(
  child: Stack(
    fit: StackFit.expand,
    children: [
      SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              Container(
                color: Colors.deepOrange,
                width: double.maxFinite,
                height: height * 0.3,
              ),
              Container(
                color: Colors.black,
                width: double.maxFinite,
                height: height * 0.56,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller),
                      Utils().colSpacer20,
                      TextBox(hint: "name", editingController: _controller)
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: FlatButton(
          color: Colors.blue[900],
          onPressed: () {},
          child: Text(
            "Save",
            style: TextStyles().subTextStyleWhite,
          ),
          minWidth: double.maxFinite,
          height: height * 0.1,
        ),
      )
    ],
  ),
);

编辑:TextField 小部件的 scrollPadding 属性解决了这个问题。 谢谢@Anitesh Reddy。

【问题讨论】:

    标签: android ios flutter flutter-layout singlechildscrollview


    【解决方案1】:

    将 padding/margin 或 sizedBox(height:height*0.12) 保留在列的底部,以便定位的小部件向下移动并留出空间。

    使用滚动填充属性

    【讨论】:

    • 使用 sizedBox 我可以在按钮上方手动滚动隐藏的文本字段,但问题仍然存在。我正在考虑一种在单击按钮时获取按钮上方的文本字段的方法。 (现在 textField 已隐藏,需要滚动才能获得焦点)
    • 您无法在按钮上方获取文本字段,因为您在堆栈中使用了定位小部件,该小部件将位于屏幕中所有小部件的顶部。
    • 有没有其他方法可以实现这一点。我的要求是,当文本字段处于活动状态时,它应该位于按钮上方。感谢您的回复。
    • 您可以使用 scrollpadding 属性和 sizedbox,以便小部件自动在下方腾出空间。
    猜你喜欢
    • 2016-07-07
    • 1970-01-01
    • 1970-01-01
    • 2018-01-12
    • 1970-01-01
    • 2023-04-07
    • 2018-04-20
    • 2021-03-03
    • 2014-05-02
    相关资源
    最近更新 更多