请移步评论 用官方的吧

前言

在使用GlobalKey局部刷新方式中介绍了如何通过GlobalKey实现局部刷新优化性能，只是每次我们进行局部刷新的时候 都需要定义widget、定义state、实现build方法等。教程还是不错的，简单易懂，但是在实际使用过程中就不免有些许麻烦。今天我们通过一个小技巧来实现一个通用的局部刷新Widget

实现思路

当widget需要进行刷新时，我们可以通过调用widget的setState方法来实现，setState随后会调用State的build方法来进行重建

//请求刷新

setState((){

});

复制代码

#State

@override

Widget build(BuildContext context) {

//构建新的Widget

return new Text(_text);

}

复制代码

那么，如果 我们能将 build方法中的

return new Text(_text);

复制代码

暴漏出去，我们就可以实现通用的 局部刷新 Widget

实现方案

接口回调，将

return new Text(_text);

复制代码

暴漏给调用者来实现即可

用typedef function实现

//定义函数别名

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 createState() {

print("createState");

return PartRefreshWidgetState(child);

}

}

class PartRefreshWidgetState extends State {

BuildWidget child;

PartRefreshWidgetState(this.child);

@override

Widget build(BuildContext context) {

return child.call();

}

void update() {

setState(() {});

}

}

复制代码

使用

//1、创建一个globalKey

GlobalKey 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: [

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),

),

);

}

复制代码