Flutter實現局部刷新
更新時間：2020年07月14日 08:39:28 作者：正義啊
這篇文章主要為大家詳細介紹了Flutter實現局部刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在Flutter中，如果我們想要更新頁面中的某個widget的狀態(tài)的話，一般會使用setState方法重走build方法來刷新。當頁面布局復雜的時候，這樣肯定是不行的。
下面提供了兩種局部刷新的方式，通過provider和StreamBuilder來實現局部刷新
1、通過provider刷新
首先在pubspec.yaml中添加provider依賴
# provider provider: ^3.1.0
下面通過provider來實現一個發(fā)送驗證碼的案例。
創(chuàng)建一個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} 秒后重發(fā)',
style: timerModel.count == 0
? TextStyle(color: Colors.blue, fontSize: 14)
: TextStyle(color: Colors.grey, fontSize: 14),
),
);
}),
),
),
)
);
}
}
可以看到MyApp是繼承自 StatelessWidget的，是一個沒有狀態(tài)的widget。
通過在TimerModel中調用notifyListeners();實現刷新的效果。
2、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} 秒后重發(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);
});
}
}
使用StreamBuilder來局部刷新，通過sink.add方法向streamController.sink中添加一個事件流，這個流會被StreamBuilder中stream接收，然后觸發(fā)builder方法。
最后在頁面銷毀的時候釋放資源。
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Android入門之PopupWindow用法,對于Android初學者來說有一定的學習借鑒價值,需要的朋友可以參考下2014-08-08
Android Studio EditText點擊圖標清除文本內容的實例解析
這篇文章主要介紹了Android Studio EditText點擊圖標清除文本內容的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本篇文章主要介紹了android教你打造獨一無二的下拉刷新加載框架，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
這篇文章主要為大家詳細介紹了Android如何通過自定義ViewGroup實現側滑菜單，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-01-01
Android開發(fā)中synchronized的三種使用方式詳解
這篇文章主要介紹了Android開發(fā)中synchronized的三種使用方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
這篇文章主要為大家詳細介紹了android實現倒計時動態(tài)圈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細介紹了Android實現滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Android屏蔽EditText軟鍵盤的方法,涉及Android屏蔽EditText軟鍵盤及恢復軟鍵盤的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了Flutter組件生命周期和App生命周期示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章是對Android修改自己程序字體的方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06