Flutter 小技巧实现通用的局部刷新
请移步评论 用官方的吧
前言
在使用GlobalKey局部刷新方式中介绍了如何通过GlobalKey实现局部刷新优化性能,只是每次我们进行局部刷新的时候 都需要定义widget、定义state、实现build方法等。教程还是不错的,简单易懂,但是在实际使用过程中就不免有些许麻烦。今天我们通过一个小技巧来实现一个通用的局部刷新Widget
实现思路
当widget需要进行刷新时,我们可以通过调用widget的setState方法来实现,setState随后会调用State的build方法来进行重建
//请求刷新
setState((){
});
#State<T extends StatefulWidget>
@override
Widget build(BuildContext context) {
//构建新的Widget
return new Text(_text);
}
那么,如果 我们能将 build方法中的
return new Text(_text);
暴漏出去,我们就可以实现通用的 局部刷新 Widget
实现方案
- 接口回调,将
return new Text(_text);
暴漏给调用者来实现即可
//定义函数别名
typedef BuildWidget = Widget Function();
将函数别名 BuildWidget 作为参数,传递到State.build方法即可
完整代码
/*
* 封装的局部刷新Widget
*/
typedef BuildWidget = Widget Function();
class PartRefreshWidget extends StatefulWidget {
final Key key;
BuildWidget child;
// 接收一个Key
PartRefreshWidget(this.key, this.child);
@override
State<StatefulWidget> createState() {
print("createState");
return PartRefreshWidgetState(child);
}
}
class PartRefreshWidgetState extends State<PartRefreshWidget> {
BuildWidget child;
PartRefreshWidgetState(this.child);
@override
Widget build(BuildContext context) {
return child.call();
}
void update() {
setState(() {});
}
}
使用
//1、创建一个globalKey
GlobalKey<PartRefreshWidgetState> globalKey=GlobalKey();
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
PartRefreshWidget(globalKey,(){
//2、使用 创建一个widget
return Text(_counter.toString());
}),
//update:09-29
//另外一个widget,测试局部刷新
//注:此处在局部刷新时,不会刷新
Text(_counter.toString()),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
//3、修改数值
_counter++;
//4、开始刷新
globalKey.currentState.update();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
转载自:https://juejin.cn/post/6877460444651454478