BlocBuilder更新Column中分散的可变更组件的最优使用方式是什么

结论优先 #

你描述的场景下，方案1：为每个动态组件分别包裹独立的BlocBuilder是性能最优、投入产出比最高的选择，也是Bloc官方推荐的标准实践。

方案对比说明 #

• 方案1优势：
  Flutter框架本身的widget重建成本很低，但无意义的静态组件重建仍然会触发不必要的布局、绘制遍历链路，当静态组件包含图片、自定义绘制、复杂嵌套结构时，额外重建的损耗会被明显放大。你的场景中动态组件被静态组件自然分隔，单独包裹BlocBuilder可以完全规避所有静态组件的无效重建，性能收益最高。
  同时BlocBuilder本身是非常轻量的封装组件，2~3个BlocBuilder带来的额外资源消耗几乎可以忽略，远低于静态组件重复重建的开销，不存在“BlocBuilder用多了影响性能”的问题。
• 方案2劣势：
  该方案仅适合整个Column的所有组件都需要随状态更新、或者静态组件都是SizedBox/基础Text这类无额外资源依赖的极简组件的场景。你的场景存在多个独立静态组件，外层包裹BlocBuilder会触发全量重建，带来不必要的性能损耗，不推荐。
• 方案3劣势：
  该方案需要把分散的动态组件合并到同一个子Column中，会直接打乱原有布局结构，你需要额外补充padding、margin来还原原有的组件间隔，不仅降低代码可读性和可维护性，也没有带来比方案1更高的性能收益，属于冗余实现，不推荐。

进阶优化技巧 #

如果要进一步压缩不必要的重建，可以给每个BlocBuilder加上buildWhen参数，仅当组件关心的状态字段发生变化时才触发重建：

BlocBuilder<YourBloc, YourState>(
  // 仅当field1变化时才重建当前组件
  buildWhen: (previous, current) => previous.field1 != current.field1,
  builder: (context, state) {
    return DynamicComponent(data: state.field1);
  },
)

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