Flutter StatefulBuilder怎么实现局部刷新(flutter,开发技术)

希望大家仔细阅读，能够学有所成！

页面的全量刷新

在StatefulWidget内直接调用setState方法更新数据时，会导致页面重新执行build方法，使得页面被全量刷新。

我们可以通过以下案例了解页面的刷新情况：

inta=0;
intb=0;
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
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参数为必传，不能为空：

constStatefulBuilder({
Key?key,
requiredthis.builder,
}):assert(builder!=null),
super(key:key);

builder 包含了两个参数，一个页面的context，另一个是用于状态改变时触发重建的方法：

typedefStatefulWidgetBuilder=WidgetFunction(BuildContextcontext,StateSettersetState);
finalStatefulWidgetBuilderbuilder;

StatefulBuilder的实际应用

StatefulBuilder组件在实际应用中主要分成以下操作：

• 1、定义一个StateSetter类型的方法；

• 2、将需要局部刷新数据的组件嵌套在StatefulBuilder组件内；

• 3、调用第1步定义的StateSetter类型方法对StatefulBuilder内部进行刷新；

inta=0;
intb=0;
//1、定义一个叫做“aState”的StateSetter类型方法；
StateSetter?aState;
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
body:Center(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
//2、将第一个“ElevatedButton”组件嵌套在“StatefulBuilder”组件内；
StatefulBuilder(
builder:(BuildContextcontext,StateSettersetState){
aState=setState;
returnElevatedButton(
onPressed:(){
a++;
//3、调用“aState”方法对“StatefulBuilder”内部进行刷新；
aState((){});
},
child:Text('a:$a'),
);
},
),
ElevatedButton(
onPressed:(){
b++;
setState((){});
},
child:Text('b:$b'),
),
],
),
),
);
}

重新运行后点击第一个按钮对a进行累加时，通过Flutter Performance工具我们可以了解到，只有StatefulBuilder组件及其包含的组件被重新构建，实现了局部刷新的功能，有效的提高了页面的性能；