Flutter textField随着键盘弹出升高，点击空白处收

1、Flutter中的textField要想实现随着键盘弹出自动升高，必须要在Scaffold中，如下所示

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
              TextField(
                decoration: InputDecoration(
                  hintText: '用户名或邮箱',
                  labelText: '用户名',
                  prefixIcon: Icon(Icons.person)
                ),
              ),
              TextField(
                decoration: InputDecoration(
                    hintText: '密码',
                    labelText: '密码',
                    prefixIcon: Icon(Icons.lock)
                ),
                obscureText: true,
              )
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

2、如果textfield位置比较下面或者小屏幕时，在键盘弹出的时候导致溢出bug

溢出.png

这时候可以嵌套一层SingleChildScrollView（具体嵌套位置可以根据需要调整），如下所示

      body: Center(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.display1,
                  ),
                  Container(
                    child: LottieView.fromFile(
                      filePath: 'static/file/6213-infinity-loop.json',
                      autoPlay: true,
                      loop: true,
                      reverse: false,
                    ),
                    width: 300,
                    height: 200,
                  ),
                  TextField(
//              autofocus: true,
                    decoration: InputDecoration(
                      hintText: '用户名或邮箱',
                      labelText: '用户名',
                      prefixIcon: Icon(Icons.person)
                    ),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        hintText: '密码',
                        labelText: '密码',
                        prefixIcon: Icon(Icons.lock)
                    ),
                    obscureText: true,
                  )
                ],
              ),
            ),
          ),
        ),

效果如下：

添加SingleChildScrollView效果.gif

3、点击空白处收起键盘，直接嵌套一层GestureDetector即可，嵌套位置可以在Scaffold的body层，可以自己调整。

return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.display1,
                  ),
                  Container(
                    child: LottieView.fromFile(
                      filePath: 'static/file/6213-infinity-loop.json',
                      autoPlay: true,
                      loop: true,
                      reverse: false,
                    ),
                    width: 300,
                    height: 200,
                  ),
                  TextField(
                    decoration: InputDecoration(
                      hintText: '用户名或邮箱',
                      labelText: '用户名',
                      prefixIcon: Icon(Icons.person)
                    ),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        hintText: '密码',
                        labelText: '密码',
                        prefixIcon: Icon(Icons.lock)
                    ),
                    obscureText: true,
                  )
                ],
              ),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );