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

Question

我想实现一个布局，其中只有主按钮小部件将始终保留在脚手架的底部。 其他小部件将放置在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聚焦）

Answer 1

请按照以下步骤操作：

1.移除固定高度的Container 。

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

3.添加reverse: true到SingleChildScrollView 。

4.将resizeToAvoidBottomInset: false添加到Scaffold 。

5.将resizeToAvoidBottomPadding: false添加到Scaffold 。

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

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)
            ),
          ],
        ),
      ),
    );

Answer 2

用SingleChildScrollView包裹你的屏幕