Flutter StatefulBuilder實現局部刷新實例詳解

Posted on by

前言

flutter項目中，在頁面數據較多的情況下使用全量刷新對性能消耗較大且容易出現短暫白屏的現象，出於性能和用戶體驗方面的考慮我們經常會使用局部刷新代替全量刷新進行頁面更新操作。

GlobalKey、ValueNotifier和StreamBuilder等技術方案都可以實現Flutter頁面的局部刷新，本文主要記錄的是通過StatefulBuilder組件來實現局部刷新的方法。

頁面的全量刷新

在StatefulWidget內直接調用setState方法更新數據時，會導致頁面重新執行build方法，使得頁面被全量刷新。

我們可以通過以下案例瞭解頁面的刷新情況：

 int a = 0;
 int b = 0;
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           // 點擊按鈕，數據‘a'加1，並刷新頁面
           ElevatedButton(
             onPressed: () {
               a++;
               setState(() {});
             },
             child: Text('a : $a'),
           ),
           // 點擊按鈕，數據‘b'加1，並刷新頁面
           ElevatedButton(
             onPressed: () {
               b++;
               setState(() {});
             },
             child: Text('b : $b'),
           ),
         ],
       ),
     ),
   );
 }

代碼運行效果如圖：

當我們點擊第一個ElevatedButton組件時，會執行a++和setState(() {})語句。通過系統的Flutter Performance工具我們可以捕獲到組件刷新的情況，當執行到setState(() {})時，頁面不隻是刷新a數據所在的ElevatedButton組件，而是重新構建瞭頁面，這會造成額外的性能消耗。

出於性能的考慮，我們更希望當點擊第一個ElevatedButton組件時，系統隻對a數據進行更新，b作為局外人不參與此次活動。我們可以通過StatefulBuilder組件來實現這個功能。

StatefulBuilder簡介

StatefulBuilder組件包含瞭兩個參數，其中builder參數為必傳，不能為空：

 const StatefulBuilder({
     Key? key,
     required this.builder,
   }) : assert(builder != null),
 super(key: key);

builder 包含瞭兩個參數，一個頁面的context，另一個是用於狀態改變時觸發重建的方法：

 typedef StatefulWidgetBuilder = Widget Function(BuildContext context, StateSetter setState);
 final StatefulWidgetBuilder builder;

StatefulBuilder的實際應用

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

  • 1、定義一個StateSetter類型的方法；
  • 2、將需要局部刷新數據的組件嵌套在StatefulBuilder組件內；
  • 3、調用第1步定義的StateSetter類型方法對StatefulBuilder內部進行刷新；
 int a = 0;
 int b = 0;
 // 1、定義一個叫做“aState”的StateSetter類型方法；
 StateSetter? aState;
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           // 2、將第一個“ElevatedButton”組件嵌套在“StatefulBuilder”組件內；
           StatefulBuilder(
             builder: (BuildContext context, StateSetter setState) {
               aState = setState;
               return ElevatedButton(
                 onPressed: () {
                   a++;
                   // 3、調用“aState”方法對“StatefulBuilder”內部進行刷新；
                   aState(() {});
                 },
                 child: Text('a : $a'),
               );
             },
           ),
           ElevatedButton(
             onPressed: () {
               b++;
               setState(() {});
             },
             child: Text('b : $b'),
           ),
         ],
       ),
     ),
   );
 }

重新運行後點擊第一個按鈕對a進行累加時，通過Flutter Performance工具我們可以瞭解到，隻有StatefulBuilder組件及其包含的組件被重新構建，實現瞭局部刷新的功能，有效的提高瞭頁面的性能；

總結

StatefulWidget內更新一個屬性會導致整個樹重新構建，為防止這種不必要的性能消耗，可以通過StatefulBuilder組件進行局部刷新，有效的提高性能。

以上就是Flutter StatefulBuilder實現局部刷新實例詳解的詳細內容，更多關於Flutter StatefulBuilder局部刷新的資料請關註WalkonNet其它相關文章！

推薦閱讀：