Flutter中唤起TextField键盘触发rebuild？及重复重绘问题求解

问题分析 #

你遇到的问题是打开Cupertino日历弹窗后，点击TextField会触发HomeScreen的build方法多次调用。即使设置了resizeToAvoidBottomInset: false，弹窗关闭后的焦点切换、视图层级调整仍可能触发组件重建，而StatelessWidget本身无法阻止这种非必要的重建。

解决方案 #

通过以下两步优化，可以避免不必要的重绘：

1. 拆分无状态子组件
   将日历按钮和TextField封装为独立的StatelessWidget，并使用const构造函数修饰。这样即使父组件偶然重建，子组件因为是不可变的const实例，不会重新执行build。

2. 将HomeScreen改为StatefulWidget并启用状态保持
   使用AutomaticKeepAliveClientMixin让页面保持状态，避免因视图调整或焦点变化触发的非必要重建。

修改后的代码示例 #

拆分的子组件

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

  @override
  Widget build(BuildContext context) {
    print('CalendarButton build');
    return ElevatedButton(
      onPressed: () {
        showCupertinoDialog(
          context: context,
          barrierDismissible: true,
          builder: (BuildContext context) {
            return Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colors.white,
                height: 300.0,
                child: CupertinoDatePicker(
                  mode: CupertinoDatePickerMode.date,
                  initialDateTime: DateTime.now(),
                  onDateTimeChanged: (DateTime date) {},
                ),
              ),
            );
          },
        );
      },
      child: const Text('calendar button'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('CustomTextField build');
    return const TextField(
        decoration: InputDecoration(hintText: 'Text Field'));
  }
}

优化后的HomeScreen

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    print('HomeScreen build');
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              CalendarButton(),
              CustomTextField(),
            ],
          ),
        ),
      ),
    );
  }
}

效果说明 #

• 拆分组件后，父组件的build调用不会触发子组件重复构建，只有首次加载时会执行子组件的build。
• AutomaticKeepAliveClientMixin确保页面状态被保留，减少因系统视图调整导致的重建。

内容的提问来源于stack exchange，提问作者park