Flutter 局部刷新
flutter的局部刷新的几种方式
第一种 ：使用 GlobalKey
父组件中声明
GlobalKey<_局部刷新对象类型State> textKey = GlobalKey();
textKey.currentState.局部刷新的方法();
第二种
使用：StatefulBuilder
第三种
使用 StreamBuilder + StreamController FutureBuilder & StreamBuilder
第三种：provider （也是异步通信）
ChangeNotifier + ChangeNotifierProvider
第四种 （也是异步通信） ：Flutter ValueNotifier 异步通信、ValueListenableBuilder - 知乎
ValueNotifier + ValueListenableBuilder
第一种：使用 GlobalKey
globalkey唯一定义了某个element，它使你能够访问与element相关联的其他对象，例如buildContext、state等。
使用场景：可以通过key.currentState拿到它的状态对象，然后就可以调用其中的onPressed方法。
//请求刷新
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方法即可
完整代码
import 'package:flutter/material.dart';
//封装 通用局部刷新工具类
//定义函数别名
typedef BuildWidget = Widget Function();
class PartRefreshWidget extends StatefulWidget {
PartRefreshWidget(Key key, this._child): super(key: key);
BuildWidget _child;
@override
State createState() {
return PartRefreshWidgetState(_child);
}
}
class PartRefreshWidgetState extends State {
BuildWidget child;
PartRefreshWidgetState(this.child);
@override
Widget build(BuildContext context) {
return child.call();
}
void update() {
print('update');
setState(() {
});
}
}
使用：
import 'package:flutter/material.dart';
import 'PartRefreshWidget.dart';
class GlobalKeyDemo extends StatefulWidget {
@override
_GlobalKeyDemoState createState() => _GlobalKeyDemoState();
}
class _GlobalKeyDemoState extends State {
int _count = 0;
//使用1 创建GlobalKey
GlobalKey globalKey = new GlobalKey();
@override
Widget build(BuildContext context) {
print('----------------build');
return Scaffold(
appBar: AppBar(
title: Text("inheritedWidget"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//使用2 创建通用局部刷新widget
PartRefreshWidget(globalKey, () {
///创建需要局部刷新的widget
return Text(
'变化的：$_count',
style: TextStyle(color: Colors.green),
);
}),
Text('不变的: $_count'),
RaisedButton(
onPressed: () {
//点击
_count++;
//使用3调用刷新方法
globalKey.currentState.update();
},
),
],
),
)
);
}
}
转载：https://blog.csdn.net/jdsjlzx/article/details/123560075
第二种：使用：StatefulBuilder
使用情景：
多选和单选
单选的时候，选中一个就可以直接把结果返回，因此本身底部弹窗无需状态管理。但到多选的时候，需要知道当前选中的选项，有选项被点击的时候需要存储下来，当再次被点击的时候要清空这个选项，同时界面还需要同步更新，因此就涉及到状态管理了。
实现方式 内部使用。
在Flutter 中提供了一个 StatefulBuilder的类，提供了一个 builder方法构建有状态组件，并且提供了状态更新方法，因此在里面完成状态管理。
在这个 builder方法中，setState其实就是对应状态组件的setState对应的方法，这个 state 就是用于控制 StatefulBuilder生成的组件的状态的。这种方式有点类似于 React的 useState的钩子函数用法
使用的核心代码：
class DemoStatefulBuilderPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//状态构建器
body: buildStatefulBuilder(),
);
}
} int _count = 0;
StatefulBuilder buildStatefulBuilder() {
return StatefulBuilder(
//构建状态改变的Widget
builder: (BuildContext context, void Function(void Function()) setState) {
//居中
return Center(
//手势识别
child: GestureDetector(
child: Text("早起的年轻人 $_count"),
//单击事件
onTap: () {
//刷新当前 StatefulBuilder 中的状态
setState(() {
_count++;
});
},
),
);
},
);
}第三种 使用 FutureBuilder & StreamBuilder
使用场景：异步UI更新
很多时候我们会依赖一些异步数据来动态更新UI，比如在打开一个页面时我们需要先从互联网上获取数据，在获取数据的过程中显示一个加载框，等获取到数据时我们再渲染页面；又比如我们想展示Stream（比如文件流、互联网数据接收流）的进度。当然StatefulWidget我们完全可以实现以上功能。但由于在实际开发中依赖异步数据更新UI的这种场景非常常见，并且当StatefulWidget中控件树较大时，更新一个属性导致整个树重建，消耗性能，因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。
FutureBuilder的使用
const FutureBuilder({
Key key,
this.future, //获取数据的方法 获取用户异步处理获得数据的代码
this.initialData, //初始的默认数据 初始化数据加载
@required this.builder //数据快照 回调函数，暴露异步处理中的快照。这个是我们构建组件的主要组成。 主要来看一下它的构造函数：
}) : assert(builder != null),
super(key: key);class _MyHomePageState extends State {
Future mockNetworkData() async {
return Future.delayed(Duration(seconds: 2), () => "我是从互联网上获取的数据");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
FutureBuilder(
future: mockNetworkData(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.connectionState == ConnectionState.done){
if(snapshot.hasError){
// 请求失败，显示错误
return Text("Error: ${snapshot.error}");
}else {
// 请求成功，显示数据
return Text("Contents: ${snapshot.data}");
}
}else {
return CircularProgressIndicator();
}
}),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
} SteamBuilder的使用
class _MyHomePageState extends State {
Stream counter(){
return Stream.periodic(Duration(seconds: 1), (i){
return i;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
StreamBuilder(
stream: counter(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasError){
return Text("Error: ${snapshot.error}");
}
switch (snapshot.connectionState){
case ConnectionState.none:
return Text("没有Stream");
case ConnectionState.waiting:
return Text("等待数据、、、");
case ConnectionState.active:
return Text("active: ${snapshot.data}");
case ConnectionState.done:
return Text("Stream已关闭");
}
return null;
}),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
} StreamBuilder与StreamController的详细使用：https://blog.csdn.net/u010194271/article/details/128024208