欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年08月24日 11:39:51   作者:Zheng  
這篇文章主要為大家介紹了Flutter StatefulBuilder實現(xiàn)局部刷新實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

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

GlobalKey、ValueNotifierStreamBuilder等技術(shù)方案都可以實現(xiàn)Flutter頁面的局部刷新,本文主要記錄的是通過StatefulBuilder組件來實現(xiàn)局部刷新的方法。

頁面的全量刷新

StatefulWidget內(nèi)直接調(diào)用setState方法更新數(shù)據(jù)時,會導(dǎo)致頁面重新執(zhí)行build方法,使得頁面被全量刷新。

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

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

代碼運行效果如圖:

當(dāng)我們點擊第一個ElevatedButton組件時,會執(zhí)行a++setState(() {})語句。通過系統(tǒng)的Flutter Performance工具我們可以捕獲到組件刷新的情況,當(dāng)執(zhí)行到setState(() {})時,頁面不只是刷新a數(shù)據(jù)所在的ElevatedButton組件,而是重新構(gòu)建了頁面,這會造成額外的性能消耗。

出于性能的考慮,我們更希望當(dāng)點擊第一個ElevatedButton組件時,系統(tǒng)只對a數(shù)據(jù)進行更新,b作為局外人不參與此次活動。我們可以通過StatefulBuilder組件來實現(xiàn)這個功能。

StatefulBuilder簡介

StatefulBuilder組件包含了兩個參數(shù),其中builder參數(shù)為必傳,不能為空:

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

builder 包含了兩個參數(shù),一個頁面的context,另一個是用于狀態(tài)改變時觸發(fā)重建的方法:

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

StatefulBuilder的實際應(yīng)用

StatefulBuilder組件在實際應(yīng)用中主要分成以下操作:

  • 1、定義一個StateSetter類型的方法;
  • 2、將需要局部刷新數(shù)據(jù)的組件嵌套在StatefulBuilder組件內(nèi);
  • 3、調(diào)用第1步定義的StateSetter類型方法對StatefulBuilder內(nèi)部進行刷新;
 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”組件內(nèi);
           StatefulBuilder(
             builder: (BuildContext context, StateSetter setState) {
               aState = setState;
               return ElevatedButton(
                 onPressed: () {
                   a++;
                   // 3、調(diào)用“aState”方法對“StatefulBuilder”內(nèi)部進行刷新;
                   aState(() {});
                 },
                 child: Text('a : $a'),
               );
             },
           ),
           ElevatedButton(
             onPressed: () {
               b++;
               setState(() {});
             },
             child: Text('b : $b'),
           ),
         ],
       ),
     ),
   );
 }

重新運行后點擊第一個按鈕對a進行累加時,通過Flutter Performance工具我們可以了解到,只有StatefulBuilder組件及其包含的組件被重新構(gòu)建,實現(xiàn)了局部刷新的功能,有效的提高了頁面的性能;

總結(jié)

StatefulWidget內(nèi)更新一個屬性會導(dǎo)致整個樹重新構(gòu)建,為防止這種不必要的性能消耗,可以通過StatefulBuilder組件進行局部刷新,有效的提高性能。

以上就是Flutter StatefulBuilder實現(xiàn)局部刷新實例詳解的詳細內(nèi)容,更多關(guān)于Flutter StatefulBuilder局部刷新的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論