Flutter StreamBuilder元件實現區域性重新整理範例講解

2022-12-01 14:04:01

一、前言

在flutter專案中，頁面內直接呼叫setState方法會使得頁面重新執行build方法，導致內部元件被全量重新整理，造成不必要的效能消耗。出於效能和使用者體驗方面的考慮我們經常會使用區域性重新整理代替全量重新整理進行頁面更新的操作。包括Provider、ValueNotifier和StatefulBuilder等在內的技術方案，都能夠幫助我們實現Flutter區域性重新整理的需求。

本文記錄的是通過StreamBuilder來實現區域性重新整理的方法。

二、StreamBuilder 簡介

StreamBuilder元件的原始碼如下，其中包含了四個引數:

const StreamBuilder({
     Key? key,
     this.initialData,
     Stream<t>? stream,
     required this.builder,
   }) : assert(builder != null),
        super(key: key, stream: stream);
</t>

key : 元件的鍵值

initialData : 初始值資料，用於確保第一幀有可用資料顯示，否則將使用 null 值構建第一幀

stream : 用於監聽自己建立的資料流

builder : 必傳引數，返回一個小部件用於頁面構建

其中builder 包含了兩個引數，一個頁面的context，另一個是當前快照資訊：

typedef AsyncWidgetBuilder<t> = Widget Function(BuildContext context, AsyncSnapshot<t> snapshot);
 final AsyncWidgetBuilder<t> builder;

三、StreamBuilder的實際應用

StreamBuilder元件在實際應用中主要分成以下操作：

1、宣告一個StreamController型別的控制器；

2、將需要區域性重新整理資料的元件巢狀在StreamBuilder元件內，接收資訊；

3、往StreamBuilder裡新增資料，並通知StreamBuilder重新構建；

4、關流，避免記憶體漏失

int a = 0;
 // 1、宣告一個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、將需要區域性重新整理資料的元件巢狀在StreamBuilder元件內，並接收資訊；
           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`裡新增資料，並通知`StreamBuilder`重新構建；
               streamController.add(a);
             },
             child: Text('streamBuilder'),
           ),
         ],
       ),
     ),
   );
 }
 @override
 void dispose() {
   // TODO: implement dispose
   super.dispose();
   // 4、關流，避免記憶體漏失
   streamController.close();
 }

點選第一個ElevatedButton按鈕後，頁面執行setState(() {})方法，通過系統的Flutter Performance工具我們可以捕獲到元件重新整理的情況如下，整個頁面被重新構建，這種情況下效能消耗較大。

點選第二個ElevatedButton按鈕後，頁面執行streamController.add(a)方法，通過系統的Flutter Performance工具我們可以捕獲到元件重新整理的情況如下，只有StreamBuilder元件及其內部元件被重新構建，實現了區域性重新整理的功能，有效的提高了頁面的效能。

總結

為了避免State.setState方法重新構建全域性造成的效能消耗，我們可以通過StreamBuilder元件對頁面進行區域性重新整理。

以上就是Flutter StreamBuilder實現區域性重新整理範例詳解的詳細內容，

到此這篇關於Flutter StreamBuilder元件實現區域性重新整理範例講解的文章就介紹到這了,更多相關Flutter StreamBuilder內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Flutter StreamBuilder元件實現區域性重新整理範例講解

目錄

一、前言

二、StreamBuilder 簡介

三、StreamBuilder的實際應用

總結

熱門文章