聚焦TextField或TextFormField时，将屏幕底部推到键盘顶部 Flutter

fdx2calv 于 2023-04-22 发布在 Flutter

关注(0)|答案(2)|浏览(234)

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

来源：https://stackoverflow.com/questions/63205269/push-screen-bottom-on-top-of-keyboard-in-flutter-when-textfield-or-textformfield

2条答案

按热度按时间

q9yhzks01#

请按照以下步骤操作：

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

赞(0）回复(0）举报 2023-04-22

y4ekin9u2#

用SingleChildScrollView包裹屏幕

赞(0）回复(0）举报 2023-04-22