出现键盘时重建整个小部件树

如何解决出现键盘时重建整个小部件树

当键盘出现颤动时如何解决重新渲染整个小部件树？在我的应用程序中，每当键盘出现和消失时，都会重新构建整个小部件树？避免这种情况的解决方案是什么？

解决方法

有多种方法可以解决这个问题，以下是我过去使用过的一些解决方案。

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

保存您当前的状态

使用有状态小部件并将您应用的当前数据保存在某处。