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方法，去重繪頁面，最後在頁面小會的時候釋放掉資源。