Flutter StatefulBuilder實現(xiàn)局部刷新實例詳解
前言
flutter項目中,在頁面數(shù)據(jù)較多的情況下使用全量刷新對性能消耗較大且容易出現(xiàn)短暫白屏的現(xiàn)象,出于性能和用戶體驗方面的考慮我們經(jīng)常會使用局部刷新代替全量刷新進行頁面更新操作。
GlobalKey
、ValueNotifier
和StreamBuilder
等技術(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)文章
Android中關(guān)于百度糯米app關(guān)閉網(wǎng)頁或窗口的方法(99%人不知)
這篇文章主要介紹了Android中關(guān)于百度糯米app中關(guān)閉網(wǎng)頁或窗口的方法,其實解決方法到很簡單,但是很多人都不知道如何解決的,在網(wǎng)上也很難找到答案的,下面小編給大家揭曉答案,需要的朋友可以參考下2016-08-08Android?Studio實現(xiàn)簡易計算器App?(Java語言版)
這篇文章主要為大家詳細介紹了Android?Studio實現(xiàn)簡易計算器App,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05