Flutter StatefulBuilder怎么实现局部刷新

发布时间：2022-08-24 15:49:06 阅读：218 作者：iii 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇内容介绍了“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'),
           ),
         ],
       ),
     ),
   );
 }

代码运行效果如图：

Flutter StatefulBuilder怎么实现局部刷新

当我们点击第一个ElevatedButton组件时，会执行a++和setState(() {})语句。通过系统的Flutter Performance工具我们可以捕获到组件刷新的情况，当执行到setState(() {})时，页面不只是刷新a数据所在的ElevatedButton组件，而是重新构建了页面，这会造成额外的性能消耗。

Flutter StatefulBuilder怎么实现局部刷新

出于性能的考虑，我们更希望当点击第一个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'),
           ),
         ],
       ),
     ),
   );
 }