出現鍵盤時重建整個小部件樹

Question

當鍵盤出現在 flutter 中時，如何解決重新渲染整個小部件樹的問題？ 在我的應用程序中，每當鍵盤出現和消失時，整個小部件樹都會重新構建？ 避免這種情況的解決方案是什么？

Answer 1

有多種方法可以解決這個問題，這里有一些我過去使用過的解決方案。

Scaffold 的resizeToAvoidBottomInset參數

將此設置為false並且您的屏幕不會調整大小，這樣做的缺點是鍵盤將出現在您的 UI 頂部

例子：

class SampleScreen extends StatelessWidget {
  const SampleScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Align(
        alignment: Alignment.bottomCenter,
        child: SafeArea(
          minimum: const EdgeInsets.all(20),
          child: TextField(
            decoration: new InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 1.0),
              ),
              hintText: 'Mobile Number',
            ),
          ),
        ),
      ),
    );
  }
}

將 Scaffold 的主體包裹在 ScrollView 中

通過將你的整個身體放在一個 ScrollView 中，你現在可能有一個冗長的表單，這里唯一需要注意的是你將無法使用Spacer和Expanded小部件

例子

class SampleScreen extends StatelessWidget {
  const SampleScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        minimum: const EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Column(children: [
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.all(10),
              color: Colors.red,
              height: MediaQuery.of(context).size.height - 165,
            ),
            TextField(
              decoration: new InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black, width: 1.0),
                ),
                hintText: 'Mobile Number',
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

保存您當前的 State

使用有狀態小部件並將應用的當前數據保存在某處。