温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Flutter StatefulBuilder怎么实现局部刷新

发布时间:2022-08-24 15:49:06 来源:亿速云 阅读:196 作者:iii 栏目:开发技术

本篇内容介绍了“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怎么实现局部刷新

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'),
           ),
         ],
       ),
     ),
   );
 }

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

Flutter StatefulBuilder怎么实现局部刷新

Flutter StatefulBuilder怎么实现局部刷新

“Flutter StatefulBuilder怎么实现局部刷新”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI