本篇内容介绍了“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'), ), ], ), ), ); }
代码运行效果如图:
当我们点击第一个ElevatedButton
组件时,会执行a++
和setState(() {})
语句。通过系统的Flutter Performance工具我们可以捕获到组件刷新的情况,当执行到setState(() {})
时,页面不只是刷新a
数据所在的ElevatedButton
组件,而是重新构建了页面,这会造成额外的性能消耗。
出于性能的考虑,我们更希望当点击第一个ElevatedButton
组件时,系统只对a
数据进行更新,b
作为局外人不参与此次活动。我们可以通过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
组件在实际应用中主要分成以下操作:
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怎么实现局部刷新”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。