Flutter?StreamBuilder實現(xiàn)局部刷新實例詳解

更新時間：2022年08月24日 11:48:51 作者：Zheng

這篇文章主要為大家介紹了Flutter?StreamBuilder實現(xiàn)局部刷新實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在flutter項目中，頁面內(nèi)直接調(diào)用setState方法會使得頁面重新執(zhí)行build方法，導致內(nèi)部組件被全量刷新，造成不必要的性能消耗。出于性能和用戶體驗方面的考慮我們經(jīng)常會使用局部刷新代替全量刷新進行頁面更新的操作。

包括Provider、ValueNotifier和StatefulBuilder等在內(nèi)的技術(shù)方案，都能夠幫助我們實現(xiàn)Flutter局部刷新的需求。有興趣了解StatefulBuilder局部刷新方法可以點擊《Flutter StatefulBuilder 實現(xiàn)局部刷新》進行查看，本文記錄的是通過StreamBuilder來實現(xiàn)局部刷新的方法。

StreamBuilder 簡介

StreamBuilder組件的源代碼如下，其中包含了四個參數(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)聽自己創(chuàng)建的數(shù)據(jù)流

builder : 必傳參數(shù)，返回一個小部件用于頁面構(gòu)建

其中builder 包含了兩個參數(shù)，一個頁面的context，另一個是當前快照信息：

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

StreamBuilder的實際應用

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

1、聲明一個StreamController類型的控制器；

2、將需要局部刷新數(shù)據(jù)的組件嵌套在StreamBuilder組件內(nèi)，接收信息；

3、往StreamBuilder里添加數(shù)據(jù)，并通知StreamBuilder重新構(gòu)建；

4、關(guān)流，避免內(nèi)存泄漏。

 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、將需要局部刷新數(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();
 }

點擊第一個ElevatedButton按鈕后，頁面執(zhí)行setState(() {})方法，通過系統(tǒng)的Flutter Performance工具我們可以捕獲到組件刷新的情況如下，整個頁面被重新構(gòu)建，這種情況下性能消耗較大。

點擊第二個ElevatedButton按鈕后，頁面執(zhí)行streamController.add(a)方法，通過系統(tǒng)的Flutter Performance工具我們可以捕獲到組件刷新的情況如下，只有StreamBuilder組件及其內(nèi)部組件被重新構(gòu)建，實現(xiàn)了局部刷新的功能，有效的提高了頁面的性能。