Flutter StatefulBuilder实现局部刷新实例详解
前言
flutter项目中，在页面数据较多的情况下使用全量刷新对性能消耗较大且容易出现短暂白屏的现象，出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新操作。
GlobalKey、ValueNotifier和StreamBuilder等技术方案都可以实现Flutter页面的局部刷新，本文主要记录的是通过StatefulBuilder组件来实现局部刷新的方法。
页面的全量刷新
在StatefulWidget内直接调用setState方法更新数据时，会导致页面重新执行build方法，使得页面被全量刷新。
我们可以通过以下案例了解页面的刷新情况：
int a = 0;
int b = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 点击按钮，数据‘a'加1，并刷新页面
ElevatedButton(
onPressed: () {
a++;
setState(() {});
},
child: Text('a : $a'),
),
// 点击按钮，数据‘b'加1，并刷新页面
ElevatedButton(
onPressed: () {
b++;
setState(() {});
},
child: Text('b : $b'),
),
],
),
),
);
}
代码运行效果如图：
当我们点击第一个ElevatedButton组件时，会执行a++和setState(() {})语句。通过系统的Flutter Performance工具我们可以捕获到组件刷新的情况，当执行到setState(() {})时，页面不只是刷新a数据所在的ElevatedButton组件，而是重新构建了页面，这会造成额外的性能消耗。
出于性能的考虑，我们更希望当点击第一个ElevatedButton组件时，系统只对a数据进行更新，b作为局外人不参与此次活动。我们可以通过StatefulBuilder组件来实现这个功能。
StatefulBuilder简介
StatefulBuilder组件包含了两个参数，其中builder参数为必传，不能为空：
const StatefulBuilder({
Key? key,
required this.builder,
}) : assert(builder != null),
super(key: key);
builder 包含了两个参数，一个页面的context，另一个是用于状态改变时触发重建的方法：
typedef StatefulWidgetBuilder = Widget Function(BuildContext context, StateSetter setState); final StatefulWidgetBuilder builder;
StatefulBuilder的实际应用
StatefulBuilder组件在实际应用中主要分成以下操作：
- 1、定义一个
StateSetter类型的方法； - 2、将需要局部刷新数据的组件嵌套在
StatefulBuilder组件内； - 3、调用第1步定义的
StateSetter类型方法对StatefulBuilder内部进行刷新；
int a = 0;
int b = 0;
// 1、定义一个叫做“aState”的StateSetter类型方法；
StateSetter? aState;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 2、将第一个“ElevatedButton”组件嵌套在“StatefulBuilder”组件内；
StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
aState = setState;
return ElevatedButton(
onPressed: () {
a++;
// 3、调用“aState”方法对“StatefulBuilder”内部进行刷新；
aState(() {});
},
child: Text('a : $a'),
);
},
),
ElevatedButton(
onPressed: () {
b++;
setState(() {});
},
child: Text('b : $b'),
),
],
),
),
);
}
重新运行后点击第一个按钮对a进行累加时，通过Flutter Performance工具我们可以了解到，只有StatefulBuilder组件及其包含的组件被重新构建，实现了局部刷新的功能，有效的提高了页面的性能；
总结
StatefulWidget内更新一个属性会导致整个树重新构建，为防止这种不必要的性能消耗，可以通过StatefulBuilder组件进行局部刷新，有效的提高性能。
以上就是Flutter StatefulBuilder实现局部刷新实例详解的详细内容，更多关于Flutter StatefulBuilder局部刷新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Android自定义View绘图实现渐隐动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了Android教你如何发现APP卡顿的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Service是Android中一个强大的组件,可以用来执行需要在后台进行的任务,通过本文的介绍了解如何在Kotlin中创建和使用Service,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了Android自定义UI手势密码改进版，为大家提供了手势密码源码下载，,具有一定的实用性，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了用Android studio实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了Android 判断网络状态实例详解的相关资料,需要的朋友可以参考下2017-04-04
在开发过程中通常会遇到一些不规则的UI，比如不规则的线条，多边形，统计图表等等，用那些通用组件通过组合的方式无法进行实现，这就需要我们自己进行绘制。本文将利用Flutter绘制扇形图，感兴趣的可以学习一下2022-05-05
本文主要介绍了Android每天定时提醒功能、定时功能、闹钟的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-04-04
使用Android Studio Gradle实现友盟多渠道打包
这篇文章主要介绍了使用Android Studio Gradle实现友盟多渠道打包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Android开发之底图局部加载移动的方法,涉及Android针对图片与屏幕属性的读取、计算、设置等相关操作技巧,需要的朋友可以参考下2017-08-08
最新评论