您好,登錄后才能下訂單哦!
這篇文章主要講解了“Flutter StreamBuilder怎么實(shí)現(xiàn)局部刷新”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“Flutter StreamBuilder怎么實(shí)現(xiàn)局部刷新”吧!
在flutter項(xiàng)目中,頁(yè)面內(nèi)直接調(diào)用setState
方法會(huì)使得頁(yè)面重新執(zhí)行build
方法,導(dǎo)致內(nèi)部組件被全量刷新,造成不必要的性能消耗。出于性能和用戶體驗(yàn)方面的考慮我們經(jīng)常會(huì)使用局部刷新代替全量刷新進(jìn)行頁(yè)面更新的操作。
包括Provider
、ValueNotifier
和StatefulBuilder
等在內(nèi)的技術(shù)方案,都能夠幫助我們實(shí)現(xiàn)Flutter局部刷新的需求。
StreamBuilder
組件的源代碼如下,其中包含了四個(gè)參數(shù):
const StreamBuilder({ Key? key, this.initialData, Stream<T>? stream, required this.builder, }) : assert(builder != null), super(key: key, stream: stream);
key : 組件的鍵值
initialData : 初始值數(shù)據(jù),用于確保第一幀有可用數(shù)據(jù)顯示,否則將使用 null 值構(gòu)建第一幀
stream : 用于監(jiān)聽(tīng)自己創(chuàng)建的數(shù)據(jù)流
builder : 必傳參數(shù),返回一個(gè)小部件用于頁(yè)面構(gòu)建
其中builder
包含了兩個(gè)參數(shù),一個(gè)頁(yè)面的context,另一個(gè)是當(dāng)前快照信息:
typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot); final AsyncWidgetBuilder<T> builder;
StreamBuilder
組件在實(shí)際應(yīng)用中主要分成以下操作:
1、聲明一個(gè)StreamController
類型的控制器;
2、將需要局部刷新數(shù)據(jù)的組件嵌套在StreamBuilder
組件內(nèi),接收信息;
3、往StreamBuilder
里添加數(shù)據(jù),并通知StreamBuilder
重新構(gòu)建;
4、關(guān)流,避免內(nèi)存泄漏。
int a = 0; // 1、聲明一個(gè)StreamController類型的控制器,命名為streamController; final StreamController<int> streamController = StreamController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 2、將需要局部刷新數(shù)據(jù)的組件嵌套在StreamBuilder組件內(nèi),并接收信息; StreamBuilder<int>( stream: streamController.stream, initialData: a, builder: (BuildContext context, AsyncSnapshot<int> snapshot) { return Text('a : $a'); }, ), ElevatedButton( onPressed: () { a++; setState(() {}); }, child: Text('setState'), ), ElevatedButton( onPressed: () { a++; // 3、往`StreamBuilder`里添加數(shù)據(jù),并通知`StreamBuilder`重新構(gòu)建; streamController.add(a); }, child: Text('streamBuilder'), ), ], ), ), ); } @override void dispose() { // TODO: implement dispose super.dispose(); // 4、關(guān)流,避免內(nèi)存泄漏 streamController.close(); }
點(diǎn)擊第一個(gè)ElevatedButton
按鈕后,頁(yè)面執(zhí)行setState(() {})
方法,通過(guò)系統(tǒng)的Flutter Performance工具我們可以捕獲到組件刷新的情況如下,整個(gè)頁(yè)面被重新構(gòu)建,這種情況下性能消耗較大。
點(diǎn)擊第二個(gè)ElevatedButton
按鈕后,頁(yè)面執(zhí)行streamController.add(a)
方法,通過(guò)系統(tǒng)的Flutter Performance工具我們可以捕獲到組件刷新的情況如下,只有StreamBuilder
組件及其內(nèi)部組件被重新構(gòu)建,實(shí)現(xiàn)了局部刷新的功能,有效的提高了頁(yè)面的性能。
感謝各位的閱讀,以上就是“Flutter StreamBuilder怎么實(shí)現(xiàn)局部刷新”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)Flutter StreamBuilder怎么實(shí)現(xiàn)局部刷新這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。