1、Flutter中的textField要想實現(xiàn)隨著鍵盤彈出自動升高米酬，必須要在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位置比較下面或者小屏幕時赃额，在鍵盤彈出的時候?qū)е乱绯鯾ug

溢出.png

這時候可以嵌套一層SingleChildScrollView（具體嵌套位置可以根據(jù)需要調(diào)整）加派，如下所示

      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層，可以自己調(diào)整飞盆。

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