这是【Flutter 问题系列第 10 篇】，如果觉得有用的话，欢迎关注专栏。
- 一：为什么需要局部刷新
- 二：StatefulBuilder 组件介绍
- 1：举例说明全局刷新的弊端
- 2：如何用 StatefulBuilder 组件实现局部刷新
我们知道 Flutter 刷新界面可以用 setState 方法，但这种方法会遍历每一个子 Widget 的 State.build 从而达到刷新的效果。
这不仅会增加性能上的开销，有时候界面和数据比较复杂时，也会因全界面刷新从而带来意料之外的问题，所以我们需要做局部刷新的处理。
在 Flutter 中局部刷新也可以用 GlobalKey 的方式，不过有说尽量少用全局 key 的方式，所以介绍一下官方提供的局部刷新组件 StatefulBuilder，接下来是博客正文。
二：StatefulBuilder 组件介绍先附带上 StatefulBuilder 组件 的 官网链接 ，可自行查看官方例子。
1：举例说明全局刷新的弊端声明两个 int 类型的变量 a 和 b ，默认初始值都为 1，如下代码所示（已省去部分无关代码）
Row(
children: [
ElevatedButton(
onPressed: () => setState(() => a++), // 点击的时候让 a 自增
child: Text("我想只让 a 自增"),
),
Builder(builder: (context) {
b++;
return ElevatedButton(child: Text("我想只让 b 自增"));
}),
],
),
Row(
children: [
Text("当前 a 的值：$a"),
Text("当前 b 的值：$b"),
],
),
程序初始化后的结果如下图所示 
目前这段代码会造成两个问题
- 程序初始化的时候，当前 a 的值是 1，但 b 的值会是 2，因为界面第一次初始化的时候会走 Builder 组件中的 b++
- 同样的问题，当点击让 a 自增的时候，界面全局刷新还是会走 Builder 组件中的 b++ ，所以当我们只想让 a 自增的时候，b 同时也在自增。
也许你会说，为什么不把 b++ 放到右边按钮的点击事件中，这样即使界面刷新，b 也不会自增。当然这是可以的，不过我们想说的是遇到这种类似的情况时，如何解决。
显然，这两种情况都不是我们想要的，接下来就用 StatefulBuilder 组件解决这个问题。
2：如何用 StatefulBuilder 组件实现局部刷新步骤一
声明一个 StateSetter 的对象，StateSetter bSetter ，这里我命名为 bSetter。
步骤二
在需要刷新状态的组件中，用 StatefulBuilder 包括着，我们需要实现它的 builder 方法，并且将参数中的 setState 赋值给我们自己定义的 bSetter ，让状态知道局部刷新的是哪个组件。
StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
bSetter = setState;
return Container(
margin: EdgeInsets.symmetric(vertical: 5),
child: Text("局部刷新中当前 b 的值：$b"),
);
},
),
步骤三
在执行事件的代码中，调用 bSetter 方法，通知界面去刷新被 bSetter 绑定了状态的组件中，完成局部刷新
如下代码所示
ElevatedButton(
onPressed: () {
b++;
this.bSetter(() {});
},
child: Text("我想只让 b 自增"),
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.purple)),
)
动态演示图如下
- 当我们去点击只让 a 自增的按钮时，a 自增的同时，并没有影响到 b
- 当我们去点击只让 b 自增的按钮时，b 也完成了局部刷新
不过你可能发现了，当点击只让 b 自增按钮时，界面上 当前 b 的值 并没有随着刷新，这是为什么呢？
因为我们只用 StatefulBuilder 组件包括了局部刷新中当前 b 的值，bSetter 方法绑定了状态的也是这个组件，就像火影里只有和动物签订了契约的，才可以被召唤出来一样。
所以虽然 b 的值的确是增加了，但是界面并没有去刷新 当前 b 的值 这个组件，这也说明了局部刷新成功。
ok，关于用 StatefulBuilder 组件实现局部刷新就介绍到这里，希望可以帮到正在看博客的你。
你的问题得到解决了吗？欢迎在评论区留言。
赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。
结束语 Google 的 Flutter 越来越火，截止 2021年4月17日 GitHub 标星已达 86K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。
