1.setState(){}
这种方法最常见，但是有些地方引用的话，刷新的成本比较大，刷新的是整个页面，数据太多加载太慢的话，会有闪烁的现象
2.利用GlobalKey进行局部刷新
参考链接：https://blog.csdn.net/mubowen666/article/details/103988777
其他类似文章：https://www.jianshu.com/p/23a2e8a96a79
这种方法类似于iOS中的set方法，通过设置某个属性的时候，去刷新某个控件。在flutter中这种刷新方式，是对上面setState(){}方法的改进，根本的方法还是setState(){}，只不过是通过方法去刷新某个控件。如下：
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count = 0;
GlobalKey<_TextWidgetState> textKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
TextWidget(textKey), //需要更新的Text
FlatButton(
child: new Text('按钮 $count'),
color: Theme.of(context).accentColor,
onPressed: () {
count++; // 这里我们只给他值变动，状态刷新交给下面的Key事件
textKey.currentState.onPressed(count); //其实这个count值已经改变了 但是没有重绘所以我们看到的只是我们定义的初始值
},
),
],
),
),
);
}
}
//封装的widget
class TextWidget extends StatefulWidget {
final Key key;
const TextWidget(this.key);
@override
_TextWidgetState createState() => _TextWidgetState();
}
class _TextWidgetState extends State<TextWidget> {
String text = "0";
void onPressed(int count) {
setState((){
text = count.toString();
});
}
@override
Widget build(BuildContext context) {
return new Text(text);
}
}
3.通过provider进行局部刷新
首先在pubspec.yaml中添加provider依赖
# provider
provider: ^3.1.0
下面通过provider来实现一个发送验证码的案例。
创建一个TimerModel文件
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
class TimerModel extends ChangeNotifier{
StreamSubscription _subscription;
int _count = 0;///当前计数
int get count = 10 - _count;///剩余时间
_setCount(){
_count++;
notifyListeners();
}
startTimer(){
_count = 0;
_subscription = Observable.periodic(Duration(seconds: 1))
.startWith(10)
.take(10)
.listen((t){
_setCount();
});
}
@override
void dispose() {
_subscription?.cancel();
super.dispose();
}
页面布局如下：
void main() = runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("短信倒计时"),
),
body: Center(
child: ChangeNotifierProvider<TimerModel (
builder: (context) = TimerModel(),
child: Consumer<TimerModel (builder: (context, timerModel, _) {
return RaisedButton(
onPressed: () async {
if (timerModel.count == 0) {
timerModel.startTimer();
}
},
child: Text(
timerModel.count == 0 ? "获取验证码" : '${timerModel.count} 秒后重发',
style: timerModel.count == 0
? TextStyle(color: Colors.blue, fontSize: 14)
: TextStyle(color: Colors.grey, fontSize: 14),
),
);
}),
),
),
)
);
}
}
可以看到MyApp是继承自 StatelessWidget的，是一个没有状态的widget。
通过在TimerModel中调用notifyListeners();实现刷新的效果。
这种刷新方法，有点类似于iOS中的通知、观察者模式(KVO)，通过监听某个属性的变化，对页面进行相应的处理。
4.StreamBuilder实现局部刷新
承接第3点，作者文章后半部分提到了结合StreamBuilder对页面进行刷新：
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:rxdart/rxdart.dart';
void main() = runApp(MyApp());
class MyApp extends StatelessWidget {
final StreamController _streamController = StreamController<int ();
int count = 10;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("短信倒计时"),
),
body: Center(
child: StreamBuilder<int (
stream: _streamController.stream,
initialData: 0,
builder: (BuildContext context, AsyncSnapshot<int snapshot) {
return RaisedButton(
onPressed: () async {
if (snapshot.data == 0) {
startTimer();
}
},
child: Text(
snapshot.data == 0 ? "获取验证码" : '${snapshot
.data} 秒后重发',
style: snapshot.data == 0
? TextStyle(color: Colors.blue, fontSize: 14)
: TextStyle(color: Colors.grey, fontSize: 14),
),
);
}
),
),
)
);
}
startTimer(){
count = 10;
Observable.periodic(Duration(seconds: 1))
.take(10)
.listen((t){
_streamController.sink.add(--count);
});
}
}
此方法是通过sink.add方法向streamController.sink中添加一个事件流，StreamBuilder接收到这个stream流后，触发builder方法，去重绘页面，最后在页面小会的时候释放掉资源。