Flutter?StatefulBuilder怎么實(shí)現(xiàn)局部刷新

本篇內(nèi)容介紹了“Flutter StatefulBuilder怎么實(shí)現(xiàn)局部刷新”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

頁(yè)面的全量刷新

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

我們可以通過(guò)以下案例了解頁(yè)面的刷新情況：

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

代碼運(yùn)行效果如圖：

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

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

StatefulBuilder簡(jiǎn)介

StatefulBuilder組件包含了兩個(gè)參數(shù)，其中builder參數(shù)為必傳，不能為空：

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

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

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

StatefulBuilder的實(shí)際應(yīng)用

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

• 1、定義一個(gè)StateSetter類型的方法；

• 2、將需要局部刷新數(shù)據(jù)的組件嵌套在StatefulBuilder組件內(nèi)；

• 3、調(diào)用第1步定義的StateSetter類型方法對(duì)StatefulBuilder內(nèi)部進(jìn)行刷新；

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

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

“Flutter StatefulBuilder怎么實(shí)現(xiàn)局部刷新”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！