flutter 的StatefulBuilder实现局部刷新

StatefulBuilder简介

StatefulBuilder组件包含了两个参数，其中builder参数为必传，不能为空：

1 2 3 4 5

const StatefulBuilder({     Key? key,     required this.builder,   }) : assert(builder != null), super(key: key);

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

1 2	typedef StatefulWidgetBuilder = Widget Function(BuildContext context, StateSetter setState); final StatefulWidgetBuilder builder;

StatefulBuilder的实际应用

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

• 1、定义一个StateSetter类型的方法；
• 2、将需要局部刷新数据的组件嵌套在StatefulBuilder组件内；
• 3、调用第1步定义的StateSetter类型方法对StatefulBuilder内部进行刷新；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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组件及其包含的组件被重新构建，实现了局部刷新的功能，有效的提高了页面的性能；