当 TextField 或 TextFormField 获得焦点时，将屏幕底部推到键盘顶部答案

【问题标题】：Push screen bottom on top of keyboard in flutter when TextField or TextFormField is focused当 TextField 或 TextFormField 获得焦点时，将屏幕底部推到键盘顶部
【发布时间】：2020-11-22 02:14:40
【问题描述】：

我想实现一个布局，其中只有主按钮小部件将始终保留在脚手架的底部。其他小部件将放在SingleChildScrollView -> Column。

但当TextField 或TextFormField 获得焦点时，键盘应该将全屏推到布局底部，以便按钮可见。

使用 SingleChildScrollView 只会将TextField 或TextFormField 保留在键盘上方，而不是按钮。

我的代码：

body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
            height: screenHeight(context) - kToolbarHeight - 24,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                PlaceHolder(),
                SizedBox(height: 20.0),
                Text('Select Time'),
                SizedBox(height: 10.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                // InputField is a TextFormField
                InputField(
                  controller: _dataController,
                  labelText: 'Enter Data',
                  fieldFocusNode: _dataFocusNode,
                  textInputType: TextInputType.text,
                ),
                SizedBox(height: 20.0),
                CheckboxListTile(),
                SizedBox(height: 20.0),
                PrimaryButton(
                  buttonText: 'Save',
                  onPressed: () {},
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
        ),

这是两个屏幕布局。您可以忽略除TextFormField 和Main Button 之外的所有其他小部件。

屏幕一：无键盘（TextField 或 TextFormField 未聚焦）

屏幕二：使用键盘（TextField 或 TextFormField 聚焦）

【问题讨论】：

您可以在问题中包含您的代码吗？另外，请尽量减少图片。
好的。添加...

标签： flutter

【解决方案1】：

按照以下步骤操作：

1.删除固定高度的Container。

2. 在页面底部添加一个Padding 小部件并将其bottom 填充设置为MediaQuery.of(context).viewInsets.bottom。

3. 将reverse: true 添加到SingleChildScrollView。

4. 将resizeToAvoidBottomInset: false 添加到Scaffold。

5. 将resizeToAvoidBottomPadding: false 添加到Scaffold。

完整代码：（更改用 cmets 标记）

return Scaffold(
      resizeToAvoidBottomInset: false, // this is new
      resizeToAvoidBottomPadding: false, // this is new
      body: SingleChildScrollView( 
        reverse: true, // this is new 
        physics: BouncingScrollPhysics(),
        child: Column( // the container is removed
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            PlaceHolder(),
            SizedBox(height: 20.0),
            Text('Select Time'),
            SizedBox(height: 10.0),
            PlaceHolder(),
            SizedBox(height: 20.0),
            PlaceHolder(),
            SizedBox(height: 20.0),
            // InputField is a TextFormField
            InputField(
              controller: _dataController,
              labelText: 'Enter Data',
              fieldFocusNode: _dataFocusNode,
              textInputType: TextInputType.text,
            ),
            SizedBox(height: 20.0),
            CheckboxListTile(),
            SizedBox(height: 20.0),
            PrimaryButton(
              buttonText: 'Save',
              onPressed: null, // changed this since it had a syntax error
            ),
            Padding( // this is new
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
            ),
          ],
        ),
      ),
    );

【讨论】：

【解决方案2】：

用SingleChildScrollView包裹你的屏幕

【讨论】：

只保留键盘上方的TextField，而不是按钮。
如果你从容器中移除高度，它会起作用@AbdullahAlNahid吗？
占位符小部件之一是需要高度的 Gridview。容器高度对此有所帮助。没有容器高度，Column 中的 Gridview 会崩溃。
用 Expanded 包裹 GridView 并移除高度。