让Flutter 应用程序性能提高 10 倍的 10 个技巧
Flutter 应用程序以其精美的设计和流畅的功能而闻名，但性能问题会很快破坏用户体验。借助这 10 个优化性能的专家技巧，将您的应用提升到一个新的水平。
使用 WidgetsBindingObserver 跟踪应用程序的生命周期
使用“WidgetsBindingObserver”来跟踪您的应用程序的生命周期。此观察器允许您在应用程序恢复、暂停或不活动时接收回调，这可以帮助您识别性能瓶颈并优化应用程序的行为。
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
@override
void initState() {
WidgetsBinding.instance.addObserver(this);
super.initState();
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
// Handle state changes here
}
//...
}
使用 RepaintBoundary 小部件隔离应用程序的各个部分
使用“RepaintBoundary”小部件来隔离导致性能问题的应用程序部分。“RepaintBoundary”小部件可用于包装导致性能问题的小部件，以便应用程序的其余部分可以继续平稳运行。
RepaintBoundary(
child: MyExpensiveWidget(),
);
使用 InheritedWidget 获取数据
将“InheritedWidget”用于向下传递到小部件树的数据。“InheritedWidget”是一种特殊的小部件，可用于将数据向下传递到小部件树中，这有助于减少重建次数并提高性能。
class MyInheritedWidget extends InheritedWidget {
final int myData;
MyInheritedWidget({
Key key,
@required this.myData,
@required Widget child,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(MyInheritedWidget old) => myData != old.myData;
static MyInheritedWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
}
}
使用 StreamBuilder 而不是 FutureBuilder
尽可能使用“StreamBuilder”而不是“FutureBuilder”。“StreamBuilder”允许您在更新发生时接收更新，这有助于减少重建次数并提高性能。
StreamBuilder(
stream: myStream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data);
} else if (snapshot.hasError) {
return Text(snapshot.error);
}
return CircularProgressIndicator();
},
);
使用 CustomScrollView 而不是 ListView
尽可能使用“CustomScrollView”而不是“ListView”。“CustomScrollView”比“ListView”更高效，因为它只构建当前在屏幕上可见的小部件。
CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return MyListItem(data: myData[index]);
},
childCount: myData.length,
),
),
],
);
使用 AnimationController 来控制动画
使用“AnimationController”来控制动画。“AnimationController”允许您控制动画的时间和进度，这有助于减少重建次数并提高性能。
class MyAnimationWidget extends StatefulWidget {
@override
_MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}
class _MyAnimationWidgetState extends State<MyAnimationWidget>
with SingleTickerProvider{
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
// Use _controller.value to control the animation
return Transform.translate(
offset: Offset(0, _controller.value * 100),
child: child,
);
},
child: MyChildWidget(),
);
}
}
使用 Wrap 小部件而不是 ListView 小部件
尽可能使用“Wrap”小部件而不是“ListView”小部件。“Wrap”小部件比“ListView”更高效，因为它只构建当前在屏幕上可见的小部件。
Wrap(
children: myChildren.map((child) => MyChildWidget(child)).toList(),
);
使用 CustomPainter 小部件绘制复杂图形
使用“CustomPainter”小部件绘制复杂的图形。“CustomPainter”小部件允许您直接在画布上绘制，这比构建大量嵌套的画布要高效得多
class MyCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// Draw complex graphics on the canvas
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
使用 PerformanceOverlay 小部件查看应用程序性能的实时可视化。
使用“PerformanceOverlay”小部件查看应用程序性能的实时可视化。此小部件可以帮助您识别应用程序中可能导致性能问题的区域，并为您提供有关如何优化它们的想法。
PerformanceOverlay(
enabled: true,
overlayRect: Rect.fromLTWH(0, 0, 200, 200),
children: [
// Your widgets
],
);
使用 Dart 内置的 Profile 和 Release 模式来测试性能
使用 Dart 内置的“Profile”和“Release”模式来测试性能。配置文件模式为您提供详细的性能信息，发布模式优化应用程序的性能和速度，这将帮助您识别和修复性能问题。
flutter run --profile
或者
flutter run --release
请注意，这些只是代码的示例。
更多大数据相关精彩内容欢迎B站搜索“千锋教育”
- 点赞
- 收藏
- 关注作者
评论（0）