Flutter實(shí)現(xiàn)局部刷新
在Flutter中,如果我們想要更新頁面中的某個(gè)widget的狀態(tài)的話,一般會(huì)使用setState方法重走build方法來刷新。當(dāng)頁面布局復(fù)雜的時(shí)候,這樣肯定是不行的。
下面提供了兩種局部刷新的方式,通過provider和StreamBuilder來實(shí)現(xiàn)局部刷新
1、通過provider刷新
首先在pubspec.yaml中添加provider依賴
# provider provider: ^3.1.0
下面通過provider來實(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(); } }
頁面布局如下:
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è)沒有狀態(tài)的widget。
通過在TimerModel中調(diào)用notifyListeners();實(shí)現(xiàn)刷新的效果。
2、StreamBuilder實(shí)現(xià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); }); } }
使用StreamBuilder來局部刷新,通過sink.add方法向streamController.sink中添加一個(gè)事件流,這個(gè)流會(huì)被StreamBuilder中stream接收,然后觸發(fā)builder方法。
最后在頁面銷毀的時(shí)候釋放資源。
效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android?ANR分析trace文件的產(chǎn)生流程詳情
這篇文章主要介紹了Android?ANR分析trace文件的產(chǎn)生流程詳情,文章圍繞主題展開相詳細(xì)的內(nèi)容介紹,需要的朋友可以參考一下2022-07-07Android之在linux終端執(zhí)行shell腳本直接打印當(dāng)前運(yùn)行app的日志的實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于Android之在linux終端執(zhí)行shell腳本直接打印當(dāng)前運(yùn)行app的日志的實(shí)現(xiàn)方法,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-02-02設(shè)置界面開發(fā)Preference Library數(shù)據(jù)重建機(jī)制詳解
這篇文章主要為大家介紹了設(shè)置界面開發(fā)利器Preference Library數(shù)據(jù)重建機(jī)制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android webview 遇到android.os.FileUriExposedException錯(cuò)誤解決辦法
這篇文章主要介紹了Android webview 遇到android.os.FileUriExposedException錯(cuò)誤解決辦法的相關(guān)資料,希望通過本文能幫助到大家,讓大家遇到這樣的問題解決,需要的朋友可以參考下2017-10-10深入Android HandlerThread 使用及其源碼完全解析
這篇文章主要介紹了深入Android HandlerThread 使用及其源碼完全解析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08Android checkbox的listView(多選,全選,反選)具體實(shí)現(xiàn)方法
由于listview的一些特性,剛開始寫這種需求的功能的時(shí)候都會(huì)碰到一些問題,重點(diǎn)就是存儲(chǔ)每個(gè)checkbox的狀態(tài)值,在這里分享出了完美解決方法:2013-06-06Android編程基于自定義view實(shí)現(xiàn)公章效果示例【附源碼下載】
這篇文章主要介紹了Android編程基于自定義view實(shí)現(xiàn)公章效果,結(jié)合實(shí)例形式分析了Android使用自定義view進(jìn)行圖形繪制的相關(guān)操作技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2017-11-11Android網(wǎng)絡(luò)請求-sign參數(shù)的設(shè)置方式
這篇文章主要介紹了Android網(wǎng)絡(luò)請求-sign參數(shù)的設(shè)置方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android原生項(xiàng)目集成React Native的方法
本篇文章主要介紹了Android原生項(xiàng)目集成React Native的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11