Flutter中Stack布局图片下方放置CircularProgressIndicator是否影响UI性能？

问题解答 #

是否会降低UI运行速度 #

是，这种写法一定会产生不必要的性能开销，页面中这类Stack的数量越多，UI运行速度下降越明显，中低端设备上甚至会出现明显的掉帧。

被遮挡的CircularProgressIndicator是否会被自动停用 #

不会，Flutter框架默认没有自动停用被遮挡动画组件的逻辑。

原理说明 #

CircularProgressIndicator是自带循环动画的组件，只要挂载在当前组件树中，就会持续触发逐帧重绘来更新旋转状态。哪怕上层盖了完全不透明的图片把它完全挡住，Flutter的渲染流水线依然会完整执行它的动画计算、布局、绘制流程，这部分开销不会被自动省略。当页面同时存在几十上百个这种被遮挡的动画组件时，每帧额外的计算开销会直接占用UI线程资源，拖慢整体渲染速度。

优化方案 #

不要用「上层组件遮挡」的方式隐藏加载状态，改用条件渲染：

• 图片加载完成前，只在组件树中保留CircularProgressIndicator
• 图片加载完成后，直接把CircularProgressIndicator从组件树中移除，仅保留图片组件即可
  如果有特殊场景需要固定组件结构，也可以用Visibility组件包裹进度条，图片加载完成后将visible设为false，同时设置maintainState: false，确保进度条被完全从组件树中卸载，不会再产生额外开销。

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