深入理解 Flutter 中减少重绘提升性能的原理
2021-04-106.1k 阅读
理解 Flutter 重绘机制
Flutter 渲染流程概述
在 Flutter 中，渲染流程大致可以分为三个主要阶段：布局（Layout）、绘制（Paint）和合成（Compositing）。布局阶段确定每个 Widget 在屏幕上的位置和大小；绘制阶段将每个 Widget 绘制到一个或多个图层（Layer）上；合成阶段则将这些图层组合在一起，最终显示到屏幕上。重绘通常发生在绘制阶段，当某个 Widget 的状态发生变化，导致其外观需要更新时，就可能触发重绘。
例如，考虑一个简单的计数器应用：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
在这个应用中，每次点击 FloatingActionButton 调用 _incrementCounter 方法，通过 setState 改变 _counter 的值，从而触发 build 方法重新执行，这就可能导致相关 Widget 的重绘。
导致重绘的常见因素
- Widget 状态变化：如上述计数器应用中
_counter值的改变。当State对象内部的数据发生变化并调用setState时，Flutter 会标记该State对应的 Widget 需要更新，进而可能触发重绘。 - 父 Widget 布局变化：如果父 Widget 的布局参数（如
ConstrainedBox的约束条件改变），可能会导致子 Widget 的布局和绘制发生变化，从而触发重绘。例如，一个ListView的scrollDirection从垂直变为水平，其内部子项的布局和绘制都需要重新计算。 - 主题（Theme）变化：Flutter 应用的主题控制着许多视觉元素，如颜色、字体等。当主题发生变化时，使用了该主题属性的 Widget 可能需要重绘。比如，通过
Theme.of(context).primaryColor获取主题颜色的 Widget，在主题颜色改变时会触发重绘。
重绘对性能的影响
重绘操作会消耗 CPU 和 GPU 的资源。每次重绘都需要重新计算 Widget 的绘制指令，并将其发送到 GPU 进行渲染。如果重绘频繁发生，尤其是在复杂界面中，会导致帧率下降，用户体验变差，出现卡顿现象。例如，在一个包含大量列表项的 ListView 中，如果每个列表项都频繁重绘，就会严重影响滚动的流畅性。
减少重绘提升性能的原理
理解 Flutter 的 Element 与 RenderObject 模型
- Element 树：在 Flutter 中，
Widget是不可变的描述对象，而Element是Widget在屏幕上的实例。Element树反映了Widget树的结构，并且保存了状态和布局信息。当Widget发生变化时，Flutter 会通过Element树来高效地更新界面。例如，在上述计数器应用中，每次调用setState时，Flutter 会在Element树中找到对应的StatefulElement，并根据新的Widget描述更新其状态。 - RenderObject 树：
RenderObject负责具体的布局和绘制操作。每个Element通常会对应一个RenderObject。RenderObject树的结构与Element树类似，但更侧重于渲染相关的功能。RenderObject会根据布局约束计算自身的大小和位置，并执行绘制操作。例如，RenderBox是RenderObject的一个子类，用于处理矩形框相关的布局和绘制，像Container等 Widget 对应的RenderObject就是RenderBox的具体实现。
重绘范围的确定
- 脏标记（Dirty Marking）机制：Flutter 使用脏标记机制来确定哪些
RenderObject需要重绘。当一个RenderObject的状态发生变化时（例如其布局约束改变、数据更新等），它会被标记为 “脏”。在每次绘制之前，Flutter 会遍历RenderObject树，只对那些被标记为脏的RenderObject进行重绘操作。例如，在一个包含多个嵌套 Widget 的界面中，如果只有某个子 Widget 的数据发生变化，那么只有该子 Widget 对应的RenderObject及其祖先RenderObject会被标记为脏，而其他未受影响的RenderObject不会进行不必要的重绘。 - 依赖关系追踪：
RenderObject之间存在依赖关系。例如，一个RenderObject的大小可能依赖于其父RenderObject的约束，或者依赖于其兄弟RenderObject的布局。当某个RenderObject发生变化时，Flutter 会根据这些依赖关系来确定哪些其他RenderObject也需要更新。比如，在一个水平排列的Row中，如果其中一个子RenderObject的宽度发生变化，Row本身及其其他子RenderObject可能都需要重新布局和绘制，因为它们的位置和大小依赖于整个Row的布局。
优化重绘的核心原理
- 减少状态变化触发重绘的范围：通过合理组织
Widget树结构，将可能频繁变化的部分与相对稳定的部分分离。例如，可以将计数器应用中的文本显示部分和按钮部分分别放在不同的StatelessWidget中，这样当计数器值变化时，只有文本显示的Widget会重绘，按钮部分不受影响。
class CounterText extends StatelessWidget {
final int counter;
CounterText({this.counter});
@override
Widget build(BuildContext context) {
return Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
);
}
}
class CounterButton extends StatelessWidget {
final VoidCallback onPressed;
CounterButton({this.onPressed});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: onPressed,
tooltip: 'Increment',
child: Icon(Icons.add),
);
}
}
class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
CounterText(counter: _counter),
],
),
),
floatingActionButton: CounterButton(onPressed: _incrementCounter),
);
}
}
- 避免不必要的布局变化：确保
RenderObject的布局参数稳定，减少因布局参数频繁改变导致的重绘。例如，避免在build方法中动态创建ConstrainedBox等改变布局约束的 Widget，除非确实需要。如果必须动态改变布局约束，可以考虑使用动画来平滑过渡，减少重绘的冲击。 - 利用缓存机制：Flutter 提供了一些缓存机制来减少重绘。例如，
RepaintBoundaryWidget 可以创建一个新的绘制边界，将其内部的绘制操作缓存起来。当RepaintBoundary内部的 Widget 发生变化时，只有该边界内的部分会重绘，而不会影响外部。这在处理一些频繁变化但相对独立的界面区域时非常有用。比如，一个实时更新的图表区域，可以放在RepaintBoundary内，这样图表的更新不会导致整个屏幕的其他部分重绘。
具体优化方法与代码示例
使用 const Widgets
- 原理：
constWidgets 是不可变的，Flutter 可以在编译时确定其属性，并且在运行时可以复用相同的实例。这意味着如果一个constWidget 没有任何状态变化，它不会触发重绘。例如，一个const Icon(Icons.add)图标，无论在应用的哪个地方使用，只要其属性不变，都指向同一个实例，不会因为其他地方的变化而重绘。 - 代码示例：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Using const Widgets'),
),
body: const Center(
child: Icon(Icons.favorite, color: Colors.red, size: 60),
),
),
);
}
}
在这个示例中，Text 和 Icon Widget 都使用了 const 修饰，它们在应用运行过程中不会因为外部因素触发重绘，除非整个 MyApp Widget 被重建。
分离可变与不可变部分
- 原理：如前文所述，将可能频繁变化的部分与相对稳定的部分分离到不同的 Widget 中，可以减少重绘范围。稳定部分的 Widget 不会因为可变部分的变化而重绘。
- 代码示例：
class StaticPart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue[100],
child: const Text(
'This is a static part',
style: TextStyle(fontSize: 20),
),
);
}
}
class DynamicPart extends StatefulWidget {
@override
_DynamicPartState createState() => _DynamicPartState();
}
class _DynamicPartState extends State<DynamicPart> {
int _value = 0;
void _increment() {
setState(() {
_value++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('Value: $_value'),
ElevatedButton(
onPressed: _increment,
child: const Text('Increment'),
),
],
);
}
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Separate Static and Dynamic'),
),
body: Column(
children: <Widget>[
StaticPart(),
DynamicPart(),
],
),
);
}
}
在这个示例中，StaticPart 是一个 StatelessWidget，其内容不会改变，不会因为 DynamicPart 中 _value 的变化而重绘。只有 DynamicPart 会在按钮点击时重绘。
使用 RepaintBoundary
- 原理：
RepaintBoundary创建一个新的绘制边界，内部的绘制操作会被缓存。当内部 Widget 状态变化时，只有RepaintBoundary内部的部分会重绘，不会影响外部。 - 代码示例：
class AnimatedCircle extends StatefulWidget {
@override
_AnimatedCircleState createState() => _AnimatedCircleState();
}
class _AnimatedCircleState extends State<AnimatedCircle> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);
_animation = Tween<double>(begin: 50, end: 100).animate(_controller)
..addListener(() {
setState(() {});
});
_controller.repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: _animation.value,
height: _animation.value,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
);
}
}
class MainWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Using RepaintBoundary'),
),
body: Column(
children: <Widget>[
const Text('Some static text above the circle'),
RepaintBoundary(
child: AnimatedCircle(),
),
const Text('Some static text below the circle'),
],
),
);
}
}
在这个示例中，AnimatedCircle 是一个动态变化的 Widget，通过 RepaintBoundary 包裹后，其动画过程中的重绘不会影响到上下的静态文本。如果不使用 RepaintBoundary，AnimatedCircle 的重绘可能会导致整个屏幕其他部分不必要的重绘。
避免在 build 方法中创建新对象
- 原理：在
build方法中每次创建新对象会导致 Flutter 认为该 Widget 发生了变化，可能触发不必要的重绘。例如，每次在build方法中创建一个新的List或Map对象，Flutter 会将其视为 Widget 状态的改变，从而可能引发重绘。 - 代码示例：
class BadPracticeWidget extends StatefulWidget {
@override
_BadPracticeWidgetState createState() => _BadPracticeWidgetState();
}
class _BadPracticeWidgetState extends State<BadPracticeWidget> {
int _counter = 0;
void _increment() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
List<int> newList = [1, 2, 3]; // 每次 build 都创建新的 List
return Column(
children: <Widget>[
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _increment,
child: const Text('Increment'),
),
],
);
}
}
class GoodPracticeWidget extends StatefulWidget {
@override
_GoodPracticeWidgetState createState() => _GoodPracticeWidgetState();
}
class _GoodPracticeWidgetState extends State<GoodPracticeWidget> {
int _counter = 0;
final List<int> _list = [1, 2, 3]; // 在类成员中定义，避免每次 build 创建新对象
void _increment() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _increment,
child: const Text('Increment'),
),
],
);
}
}
在 BadPracticeWidget 中，每次 build 方法执行都创建新的 List，这可能导致不必要的重绘。而 GoodPracticeWidget 将 List 定义为类成员，避免了这种情况。
使用 ValueListenableBuilder 优化状态监听
- 原理：
ValueListenableBuilder可以监听ValueListenable对象的变化，并仅在值发生变化时重建 Widget。相比于直接在StatefulWidget中使用setState，它可以更细粒度地控制重绘。例如，当一个ValueNotifier的值发生变化时，ValueListenableBuilder会根据新值重建其内部的 Widget，而不会影响外部其他无关的 Widget。 - 代码示例：
class CounterModel with ChangeNotifier {
int _counter = 0;
int get counter => _counter;
void increment() {
_counter++;
notifyListeners();
}
}
class ValueListenableCounter extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterModel model = CounterModel();
return Column(
children: <Widget>[
ValueListenableBuilder<int>(
valueListenable: ValueNotifier(model.counter),
builder: (context, value, child) {
return Text('Value: $value');
},
),
ElevatedButton(
onPressed: model.increment,
child: const Text('Increment'),
),
],
);
}
}
在这个示例中，ValueListenableBuilder 只在 ValueNotifier 的值（即计数器的值）发生变化时重建 Text Widget，而不会像直接使用 setState 那样可能导致整个 Column 及其子 Widget 不必要的重绘。
利用 Flutter 的缓存策略
- 原理：Flutter 内部有一些缓存机制，如图片缓存等。合理利用这些缓存可以减少重绘。例如，
ImageCache可以缓存已经加载的图片，当再次需要显示相同图片时，直接从缓存中获取，而不需要重新加载和绘制图片，从而减少重绘操作。 - 代码示例：
class ImageCachingExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Image Caching'),
),
body: Column(
children: <Widget>[
Image.asset('assets/images/sample.jpg'),
Image.asset('assets/images/sample.jpg'), // 相同图片，从缓存获取
],
),
);
}
}
在这个示例中，第二次使用 Image.asset 加载相同图片时，Flutter 会从 ImageCache 中获取图片，避免了重复加载和绘制，提升了性能并减少了重绘。
性能分析工具辅助优化
Flutter DevTools
- 性能分析功能：Flutter DevTools 是一个强大的工具集，其中的性能分析功能可以帮助开发者深入了解应用的性能状况。通过性能分析，开发者可以查看帧率、重绘次数、CPU 和 GPU 使用率等关键指标。例如，在 DevTools 的性能面板中，可以录制一段应用操作（如滚动列表、点击按钮等），然后分析在这个过程中各个 Widget 的重绘情况。如果发现某个 Widget 重绘过于频繁，可以针对性地进行优化。
- 使用方法：首先确保 Flutter DevTools 已经安装并启动。在运行 Flutter 应用时，通过
flutter run --profile命令以性能分析模式运行应用。然后在 DevTools 中选择对应的应用实例，进入性能分析页面。在页面中可以选择录制性能数据，操作应用后停止录制，DevTools 会展示详细的性能分析报告，包括重绘相关的信息。
Observatory
- 深入分析能力：Observatory 提供了更底层的应用运行时信息，对于深入理解重绘原理和优化非常有帮助。它可以让开发者查看
Element树和RenderObject树的结构、状态变化等。例如，通过 Observatory 可以观察到某个RenderObject何时被标记为脏，以及为什么会被标记为脏，从而找出重绘的根本原因。 - 连接与使用：在 Flutter 应用运行时，通过
flutter attach命令连接到正在运行的应用实例，然后可以在浏览器中打开 Observatory 界面。在 Observatory 界面中，可以使用各种功能来查看应用的内部状态，如查看Element和RenderObject的属性、观察状态变化的日志等，以辅助优化重绘相关的性能问题。
通过合理运用这些性能分析工具，开发者可以更准确地定位和解决重绘导致的性能问题，进一步提升 Flutter 应用的性能和用户体验。同时，结合上述减少重绘的原理和具体优化方法，能够打造出高效、流畅的 Flutter 应用。在实际开发中，不断地进行性能测试和优化是确保应用质量的重要环节。