尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Flutter 动画掉帧,先分清 UI 与 Raster 线程

Flutter 动画掉帧,先分清 UI 与 Raster 线程 Flutter 动画掉帧先分清 UI 与 Raster 线程列表展开再叠一层模糊背景视觉上只是两笔渲染链路却可能一下变重。别先给组件套RepaintBoundary先打开 DevTools 看性能轨迹耗时落在 UI 线程还是 Raster 线程决定了刀该落在哪里。两种常见的根因动画状态放在列表或页面根部每一帧都让大量子树重新 build。BackdropFilter覆盖范围很大滚动时反复触发昂贵的离屏绘制。RepaintBoundary只是在合适的位置隔离绘制边界不会减少子树 build也不会让模糊免费。加之前后都应录一次同样的交互轨迹确认它确实减少了重绘。把动画收进局部组件class ExpandTile extends StatelessWidget { const ExpandTile({super.key, required this.controller, required this.child}); final AnimationController controller; final Widget child; override Widget build(BuildContext context) { return AnimatedBuilder( animation: controller, child: child, builder: (context, cachedChild) SizeTransition( sizeFactor: controller, child: RepaintBoundary(child: cachedChild!), ), ); } }这段代码的重点是复用静态 child不是把边界组件当性能开关。若列表项离屏后不必保持动画及时停止控制器若模糊只是装饰优先试试透明色层或预先准备的素材。性能优化得从测量开始也要以测量结束。
返回列表