1.setState(){}
這種方法最常見(jiàn),但是有些地方引用的話,刷新的成本比較大,刷新的是整個(gè)頁(yè)面,數(shù)據(jù)太多加載太慢的話,會(huì)有閃爍的現(xiàn)象
2.利用GlobalKey進(jìn)行局部刷新
參考鏈接:https://blog.csdn.net/mubowen666/article/details/103988777
其他類似文章:http://www.lxweimin.com/p/23a2e8a96a79
這種方法類似于iOS中的set方法,通過(guò)設(shè)置某個(gè)屬性的時(shí)候,去刷新某個(gè)控件。在flutter中這種刷新方式,是對(duì)上面setState(){}方法的改進(jìn),根本的方法還是setState(){},只不過(guò)是通過(guò)方法去刷新某個(gè)控件。如下:
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++; // 這里我們只給他值變動(dòng),狀態(tài)刷新交給下面的Key事件
textKey.currentState.onPressed(count); //其實(shí)這個(gè)count值已經(jīng)改變了 但是沒(méi)有重繪所以我們看到的只是我們定義的初始值
},
),
],
),
),
);
}
}
//封裝的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.通過(guò)provider進(jìn)行局部刷新
內(nèi)容來(lái)源:https://cloud.tencent.com/developer/article/1719264
首先在pubspec.yaml中添加provider依賴
# provider
provider: ^3.1.0
下面通過(guò)provider來(lái)實(shí)現(xiàn)一個(gè)發(fā)送驗(yàn)證碼的案例。
創(chuàng)建一個(gè)TimerModel文件
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
class TimerModel extends ChangeNotifier{
StreamSubscription _subscription;
int _count = 0;///當(dāng)前計(jì)數(shù)
int get count = 10 - _count;///剩余時(shí)間
_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();
}
頁(yè)面布局如下:
void main() = runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("短信倒計(jì)時(shí)"),
),
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 ? "獲取驗(yàn)證碼" : '${timerModel.count} 秒后重發(fā)',
style: timerModel.count == 0
? TextStyle(color: Colors.blue, fontSize: 14)
: TextStyle(color: Colors.grey, fontSize: 14),
),
);
}),
),
),
)
);
}
}
可以看到MyApp是繼承自 StatelessWidget的,是一個(gè)沒(méi)有狀態(tài)的widget。
通過(guò)在TimerModel中調(diào)用notifyListeners();實(shí)現(xiàn)刷新的效果。
這種刷新方法,有點(diǎn)類似于iOS中的通知、觀察者模式(KVO),通過(guò)監(jiān)聽(tīng)某個(gè)屬性的變化,對(duì)頁(yè)面進(jìn)行相應(yīng)的處理。
4.StreamBuilder實(shí)現(xiàn)局部刷新
承接第3點(diǎn),作者文章后半部分提到了結(jié)合StreamBuilder對(duì)頁(yè)面進(jìn)行刷新:
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("短信倒計(jì)時(shí)"),
),
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 ? "獲取驗(yàn)證碼" : '${snapshot
.data} 秒后重發(fā)',
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);
});
}
}
此方法是通過(guò)sink.add方法向streamController.sink中添加一個(gè)事件流,StreamBuilder接收到這個(gè)stream流后,觸發(fā)builder方法,去重繪頁(yè)面,最后在頁(yè)面小會(huì)的時(shí)候釋放掉資源。