在 Flutter 中出现在键盘上方的按钮

Question

我有一个布局，登录按钮位于屏幕底部，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',
                    ),
                  ),
                ),
              ],
            ),
          );

在此先感谢您的帮助！

Answer 1

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

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: () {},
                    )),
              ),
            ),
          ],
        )
    );

Answer 2

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

在 Flutter 中出现在键盘上方的按钮

Button to appear above the keyboard in Flutter

mobile

flutter

flutter-layout