Stateless Widget被多次调用致高CPU，求助问题原因与解决方法

我在实现功能时发现所有Widget的build函数都在持续被调用，导致CPU占用过高。已经把所有Widget改成了Stateless Widget，但问题依然存在，求指导问题原因或错误点。

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

  @override
  Widget build(BuildContext context) {
    return Consumer<EAProvider>(
      builder: (context, v, child) => Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Visibility(
                visible: v.expandBearWidget,
                child: SizedBox(
                  child: Row(
                    children: [
                      SizedBox(
                        child: Column(
                          children: const [
                            SizedBox(child: Text('Vorgang')),
                            SizedBox(child: Text('Maßnahme')),
                          ],
                        ),
                      ),
                      // 该Widget被多次调用
                      _BearbeitungItemWidget(
                          itemText: 'Technische Prüfung (E)',
                          gridLength: 11,
                          backWidgetColor: const Color.fromRGBO(250, 80, 80, 1),
                          frontWidgetSize: 0.01,
                          includeIcons: true),
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

class _BearbeitungItemWidget extends StatelessWidget {
  String itemText;
  int gridLength;
  Color backWidgetColor;
  double frontWidgetSize;
  bool includeIcons = false;

  _BearbeitungItemWidget(
      {Key? key,
      required this.itemText,
      required this.gridLength,
      required this.backWidgetColor,
      required this.frontWidgetSize,
      this.includeIcons = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('_BearbeitungItemWidget CALLED');
    return SizedBox(
      child: Column(
        children: [
          Container(
            child: const Text('Maßnahme'),
          ),
          SizedBox(
            // 该Widget被多次调用
            child: _StackedItemWidget(
                backWidgetColor: backWidgetColor,
                frontWidgetSize: frontWidgetSize,
                includeIcons: includeIcons),
          ),
          // 该Widget被多次调用
          _NumberGridWidget(length: gridLength),
        ],
      ),
    );
  }
}

class _NumberGridWidget extends StatelessWidget {
  int length;

  _NumberGridWidget({Key? key, required this.length}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('_NumberGridWidget CALLED');
    return Container(
      child: Wrap(
        children: [
          for (var i = 0; i < length; i++)
            // 该Widget被多次调用
            _GridItemWidget(
              text: i,
            )
        ],
      ),
    );
  }
}

class _GridItemWidget extends StatelessWidget {
  int text;

  _GridItemWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('_GridItemWidget CALLED');
    return Container(
      child: const Text('Maßnahme'),
    );
  }
}

class _StackedItemWidget extends StatelessWidget {
  Color backWidgetColor;
  double frontWidgetSize;
  bool includeIcons = false;

  _StackedItemWidget(
      {Key? key,
      required this.backWidgetColor,
      required this.frontWidgetSize,
      this.includeIcons = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('_StackedItemWidget CALLED');
    return Stack(
      children: [
        // 该Widget被多次调用
        _StackedChildItemWidget(
            textColor: backWidgetColor,
            width: MediaQuery.of(context).size.width * 0.10,
            includeIcons: includeIcons),
      ],
    );
  }
}

class _StackedChildItemWidget extends StatelessWidget {
  Color? textColor;
  double? width;
  bool includeIcons = false;

  _StackedChildItemWidget(
      {Key? key, this.textColor, this.width, this.includeIcons = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('_StackedChildItemWidget CALLED');
    return Container(
      child: Center(
        child: const Text('Maßnahme'),
      ),
    );
  }
}

核心原因分析 #

• Provider频繁触发更新：BearbeitungWidget通过Consumer监听EAProvider，如果EAProvider内部频繁调用notifyListeners()（哪怕状态没有实质变化），就会触发整个Consumer builder内的所有Widget重建。
• 循环Widget无稳定Key：_NumberGridWidget里循环生成的_GridItemWidget没有设置唯一Key，Flutter无法识别并复用已有Widget，每次重建都要重新创建所有子项。
• MediaQuery依赖触发重建：_StackedChildItemWidget依赖MediaQuery.of(context).size，屏幕尺寸变化（如旋转、软键盘弹出）会触发重建，但持续重建的核心原因还是Provider的无意义更新。

解决方法 #

1. 修复Provider更新逻辑
   检查EAProvider中notifyListeners()的调用时机，确保只在状态真正需要更新UI时调用。比如避免在循环、定时器中无意义触发通知，或者使用局部状态更新替代全局通知。

2. 给循环Widget添加稳定Key
   修改_NumberGridWidget的循环代码，给每个_GridItemWidget添加ValueKey，让Flutter能复用相同的Widget：

   for (var i = 0; i < length; i++)
     _GridItemWidget(
       key: ValueKey(i),
       text: i,
     )
   

3. 缩小Consumer的重建范围
   用Selector替代Consumer，只监听expandBearWidget这一个状态，减少不必要的重建：

   Selector<EAProvider, bool>(
     selector: (context, v) => v.expandBearWidget,
     builder: (context, isExpanded, child) => Visibility(
       visible: isExpanded,
       child: child!,
     ),
     child: SizedBox(
       child: Row(
         children: [
           SizedBox(
             child: Column(
               children: const [
                 SizedBox(child: Text('Vorgang')),
                 SizedBox(child: Text('Maßnahme')),
               ],
             ),
           ),
           _BearbeitungItemWidget(
               itemText: 'Technische Prüfung (E)',
               gridLength: 11,
               backWidgetColor: const Color.fromRGBO(250, 80, 80, 1),
               frontWidgetSize: 0.01,
               includeIcons: true),
         ],
       ),
     ),
   )
   

4. 提取静态Widget到child参数
   把不需要随状态变化的Widget放到Selector/Consumer的child参数里，避免每次重建都重新创建这些Widget，比如代码里的静态文本列。

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