Stateful Widget每帧触发initState与build是否正常？求排查建议

问题描述 #

我在调试一个存在状态重置问题的Stateful Widget时，发现它的initState()和build()方法每帧都会被调用，这明显是异常情况，希望得到相关的排查建议。

组件树上下文代码 #

class _SmartboxDashboard extends State<SmartboxDashboard>
    with
        Module<SmartboxDashboard>,
        SingleTickerProviderStateMixin, //, TickerProviderStateMixin
        AutomaticKeepAliveClientMixin<SmartboxDashboard> {
  @override
  bool get wantKeepAlive => true;

  // blah blah

  @override
  Widget build(BuildContext context) {
    super.build(
        context);
  return Consumer<StateModel>(builder: (context, appState, child) {
      return DefaultTabController(
        length: _tabSectionBodies.length,
        child: Scaffold(
          
          resizeToAvoidBottomInset: true,
          appBar: AppBar(

          // == The drawer
          endDrawer: Drawer(
            key: _drawerKey,
           
            child: ListView(
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  child: Text('Drawer Header'),
                ),


                // == BMS settings update enabler
              BmsSettingsUpdateMode(appState.isBmsSettingsUpdateEnabled),


               // blah blah

目标Widget代码 #

/// Expert mode selector
class BmsSettingsUpdateMode extends StatefulWidget {
  final bool isBmsSettingsUpdateEnabled;
  BmsSettingsUpdateMode(this.isBmsSettingsUpdateEnabled);
  @override
  _BmsSettingsUpdateMode createState() => _BmsSettingsUpdateMode();
}

class _BmsSettingsUpdateMode extends State<BmsSettingsUpdateMode> {
  bool isBmsSettingsUpdateEnabled = false;

  @override
  void initState() {
    super.initState();
    isBmsSettingsUpdateEnabled = widget.isBmsSettingsUpdateEnabled;
  }

  @override
  Widget build(BuildContext context) {
    /// BMS settings update enabler
    //if (!isBmsSettingsUpdateEnabled) return Text("Not expert mode");

    return Consumer<StateModel>(builder: (context, appState, child) {
      return ListTile(
          leading: Switch(
              value: isBmsSettingsUpdateEnabled,
              onChanged: (value) async {
                if (value) {
                  final r = await openPasswordForm(
                      formTitle: "BMS settings update",
                      inputHintText: "A password is required",
                      context: context,
                      callback: (context, password) {
                        // Cancel or no password provided, simply close
                        if (password == null) return false;

                        if (password == "1707") {
                          snackBar(context,
                              "OK, you can edit the BMS settings from within the BMS bottom tab");

                          return true;
                        }

                        // Wrong password
                        snackBar(context, 'Wrong password "$password"');

                        return false;
                      });

                  if (r == true)
                    setState(() {
                      isBmsSettingsUpdateEnabled =
                          appState.isBmsSettingsUpdateEnabled = true;
                    });
                } else {
                  setState(() {
                    isBmsSettingsUpdateEnabled =
                        appState.isBmsSettingsUpdateEnabled = false;
                  });
                }
              }),
          title: Text(isBmsSettingsUpdateEnabled
              ? "BMS settings: enable update"
              : "BMS settings: read only"),
          subtitle: Text(isBmsSettingsUpdateEnabled
              ? "Turning to \"read only\" will prevent you from updating the BMS settings, which is the default"
              : "Turning to \"enable update\" will show more screens and deeper information about your batteries"));
    });
  }
}

• 阻止Widget不必要的重建
  BmsSettingsUpdateMode嵌套在Drawer中，而Drawer是父组件_SmartboxDashboard的子元素。当父组件因StateModel变化触发build时，Drawer会被重新创建，连带BmsSettingsUpdateMode也被反复实例化，导致initState多次执行。解决方法：

  • 给BmsSettingsUpdateMode添加const构造函数（参数需为不可变类型）：

    const BmsSettingsUpdateMode(this.isBmsSettingsUpdateEnabled);
    

  • 给BmsSettingsUpdateMode指定唯一Key，帮助Flutter识别Widget身份，避免无意义重建。

• 修复状态同步逻辑
  当前仅在initState中初始化本地状态，后续父组件传入的widget.isBmsSettingsUpdateEnabled变化时，State不会自动同步。需重写didUpdateWidget方法：

  @override
  void didUpdateWidget(covariant BmsSettingsUpdateMode oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.isBmsSettingsUpdateEnabled != widget.isBmsSettingsUpdateEnabled) {
      setState(() {
        isBmsSettingsUpdateEnabled = widget.isBmsSettingsUpdateEnabled;
      });
    }
  }
  

• 优化Consumer嵌套逻辑
  父组件_SmartboxDashboard和子组件BmsSettingsUpdateMode都包裹在Consumer<StateModel>中，StateModel的任何变化都会触发两层重建，放大了重复调用的问题。优化方案：

  • 让BmsSettingsUpdateMode仅监听StateModel中isBmsSettingsUpdateEnabled字段的变化（如果使用的是SelectiveConsumer或类似细分监听的组件）；
  • 移除父级Consumer中不必要的范围，仅在需要的子组件中通过Provider.of获取状态。

• 消除循环触发的重建
  在Switch的onChanged回调中，同时更新本地状态和全局appState，且用setState包裹，会导致：更新appState触发Consumer重建，setState又触发本地Widget重建，两者叠加引发重复调用。建议移除本地状态，直接依赖全局状态：

  class _BmsSettingsUpdateMode extends State<BmsSettingsUpdateMode> {
    @override
    Widget build(BuildContext context) {
      return Consumer<StateModel>(builder: (context, appState, child) {
        return ListTile(
            leading: Switch(
                value: appState.isBmsSettingsUpdateEnabled,
                onChanged: (value) async {
                  if (value) {
                    final r = await openPasswordForm(...);
                    if (r == true) {
                      appState.isBmsSettingsUpdateEnabled = true;
                      appState.notifyListeners(); // 需确保StateModel是ChangeNotifier子类
                    }
                  } else {
                    appState.isBmsSettingsUpdateEnabled = false;
                    appState.notifyListeners();
                  }
                }),
            title: Text(appState.isBmsSettingsUpdateEnabled
                ? "BMS settings: enable update"
                : "BMS settings: read only"),
            subtitle: Text(appState.isBmsSettingsUpdateEnabled
                ? "Turning to \"read only\" will prevent you from updating the BMS settings, which is the default"
                : "Turning to \"enable update\" will show more screens and deeper information about your batteries"));
      });
    }
  }
  

• 验证AutomaticKeepAliveClientMixin有效性
  父组件虽然启用了AutomaticKeepAliveClientMixin并返回wantKeepAlive = true，但如果DefaultTabController的子组件未配合PageView和KeepAlive使用，Tab切换时仍可能销毁Widget状态。需检查标签页的实现逻辑，确保状态被正确保留。

内容的提问来源于stack exchange，提问作者Stéphane de Luca