打开键盘时在 Flutter 中显示溢出

Question

在我的例子中，我的所有输入都有一个圆形背景（附图 1），但是当我点击最后一个 TextField 时，我收到溢出警告（附图 2）并且无法向下滚动。

我试过在 Scaffold resizeToAvoidBottomInset: false 中使用，但是最后一个 TextField 在键盘下面，所以这不是我想要的。

my code at gist

Answer 1

我认为您需要将所有文本字段换行到 Listview 小部件中。

Answer 2

用SingleChildScrollView

包装你的代码

SingleChildScrollView(
child:Stack(
...))

Answer 3

您可以使用 Expanded 小部件包装 SingleChildScrollView 小部件。这是您唯一需要的东西。

          Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded( // Wrap with Expanded!
                  child: SingleChildScrollView(
                    child: Container(
                      padding: EdgeInsets.symmetric(
                          vertical: 16.0, horizontal: 24.0),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(32.0),
                          topRight: Radius.circular(32.0),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 16.0),
                                child: Text('Sign Up',
                                    style: TextStyle(
                                        fontSize: 20.0,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold)),
                              ),
                            ],
                          ),

打开键盘时在 Flutter 中显示溢出

When open Keyboard shows overflow in Flutter

android

overflow

ios

dart

flutter