在 Flutter 中显示在键盘上方的按钮

Posted 2023-02-23

【中文标题】在 Flutter 中显示在键盘上方的按钮

【英文标题】：Button to appear above the keyboard in Flutter

【发布时间】：2021-11-22 09:18:36

【问题描述】：

我有一个布局，登录按钮位于屏幕底部，TextFormField 位于屏幕顶部。我有一个问题，我想在它出现时显示键盘上方的按钮，但我很难做到这一点。我想要一个干净的解决方案，而不是一些 hack，但似乎找不到。是否正在使用floatingActionButton 或bottomNavigationBar 解决方案并使用MediaQuery.of(context).viewInsets.bottom？这是代码和图片。

我有这个屏幕视图：

但是当键盘出现时我看不到登录按钮：

我想在键盘出现后将按钮放在密码TexFormField 的正下方。 是否有某种简单的解决方案，但没有解决这个问题？ 代码如下：

Scaffold(
            resizeToAvoidBottomInset: false, // <- here I set this to false so my whole widget doesn't resize when the keyboard appears
            backgroundColor: Colors.white,
            body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  children: [
                    SizedBox(
                      height: 48.0,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 24.0, right: 25.0),
                      child: Form(
                        key: _loginFormKey,
                        child: Column(
                          children: [
                            TextFormField(
                              onChanged: (value) 
                                setState(() => email = value);
                              ,
                            ),
                            SizedBox(
                              height: 24.0,
                            ),
                            TextFormField(
                              onChanged: (value) 
                                setState(() => password = value);
                              ,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 23.0, right: 24, bottom: 64.0),
                  child: SizedBox(
                    width: double.infinity,
                    child: PrimaryButton(
                      buttonText: 'LOG IN',
                    ),
                  ),
                ),
              ],
            ),
          );

提前感谢您的帮助！

【问题讨论】：

您应该使用 Stack 小部件并将包含字段和按钮的 Column 放在其中。

【参考方案1】：

在您的代码中，您必须避免 resizeToAvoidBottomInset: false 使您的按钮不可见，是的，我明白了，您需要在编辑文本和按钮之间留出空间，这就是您将 Colum 添加为父项的原因。但是还有另一种更好的方法来实现这一点，yes 按钮将按照您的预期显示在下面的代码中。

Scaffold(
      backgroundColor: Colors.white,
      body:

           Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 24.0, right: 25.0),
              child: Form(
                child: Column(
                  children: [
                    TextFormField(
                      onChanged: (value) ,
                    ),
                    SizedBox(
                      height: 24.0,
                    ),
                    TextFormField(
                      onChanged: (value) ,
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding:
                    const EdgeInsets.only(left: 23.0, right: 24, bottom: 64.0),
                child: SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      child: Text("Button"),
                      onPressed: () ,
                    )),
              ),
            ),
          ],
        )
    );

【参考方案2】：

你能把 Singlechildscrollview 小部件包裹在 body 的 Column 上吗？