您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“flutter狀態(tài)管理Provider如何使用”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
網(wǎng)上也有很多關(guān)于provider說明,也可以看下官方的provider的 README。這里我記錄一下我自己學習。
我們對于簡單的數(shù)據(jù)共享可以設置參數(shù),之后子頁面進行數(shù)據(jù)方法回調(diào),從而完成數(shù)據(jù)間的通信。但是比較麻煩,下面我們看下我們使用provider如何達到這個效果。
我們2個頁面使用同一個數(shù)據(jù),在第二個頁面使用點擊增加方法。之后返回在第一個頁面也顯示出增加后的數(shù)據(jù)count達到同步的效果。
點擊增加
看下代碼實現(xiàn)首先是使用StatelessWidget來顯示頁面,簡單的頁面跳轉(zhuǎn)就不展示了。我們定義一個model用來存儲我們的count,我么混入通過混入 ChangeNotifier 管理監(jiān)聽者(通知模式)。我們寫讀數(shù)據(jù),并且當數(shù)據(jù)發(fā)生改變的時候,使用通知更新數(shù)據(jù)。
class CountModel with ChangeNotifier { int _count = 0; // 讀方法 int get counter => _count; // 寫方法 void increment() { _count++; notifyListeners(); // 通知監(jiān)聽者刷新 } }
我們2個頁面都要使用這個數(shù)據(jù),我們要把這個數(shù)據(jù)放在這2個子頁面的父節(jié)點上。通過 Provider 組件封裝數(shù)據(jù)資源,value就是需要共享的數(shù)據(jù)資源
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // 通過 Provider 組件封裝數(shù)據(jù)資源 return ChangeNotifierProvider.value( value: CountModel(), // 需要共享的數(shù)據(jù)資源 child: MaterialApp( home: FirstPage(), )); } }
我們在頁面使用的地方進行取數(shù)據(jù)
final _counter = Provider.of<CountModel>(context);
上下文就包含了我們父節(jié)點中設置的value 即CountModel()。
// 第一個頁面 class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { // 取出數(shù)據(jù) final _counter = Provider.of<CountModel>(context); return Scaffold( appBar: AppBar( title: const Text('第一個頁面'), ), body: Center( child: Text('第一個頁面count:${_counter.counter}'), ), // 跳轉(zhuǎn)到 SecondPage floatingActionButton: FloatingActionButton( child: const Icon(Icons.next_plan), onPressed: () => Navigator.of(context) .push(MaterialPageRoute(builder: (context) => SecondPage())))); } } // 第二個頁面 class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { // 取出數(shù)據(jù) final _counter = Provider.of<CountModel>(context); return Scaffold( appBar: AppBar( title: const Text('第二個頁面'), ), // 展示資源中的數(shù)據(jù) body: Center( child: Text('第二個頁面count:${_counter.counter}'), ), floatingActionButton: FloatingActionButton( onPressed: _counter.increment, child: const Icon(Icons.add), ), ); } }
通過provider很簡單的達到了我們的數(shù)據(jù)共享,同時通過通知讓我們的頁面進行了刷新。
我們上面的頁面中涉及的Widget變化也就是一個文字的展示,沒有必要整個頁面都刷新,這樣可以提高我們的性能。
我們把我們Icon換成自定義的,可以發(fā)現(xiàn)當我們點擊的時候就會一直重新build,實際我們不需要他們變化,那么我們只要我們那個Widget使用了數(shù)據(jù),我們刷新該Widget即可。我們就要使用Consumer
final Widget Function( BuildContext context, T value, Widget? child, ) builder;
定義child為我們包裹的widget,T為我們model的類型。
body: Center( child: Consumer<CountModel>( builder: (context,CountModel counter,_) => Text('第二個頁面count:${counter.counter}'), ), ),
這里我們的child為空直接每次刷新Consumer的Widget。那么我們的button怎么刷新呢
floatingActionButton: Consumer<CountModel>( builder: (context, CountModel counter, child) => FloatingActionButton( onPressed: counter.increment, child: child, ), child: MyIcon(), )
這里我們使用child屬性,把我們的builder隔離開,這樣我們就可以是我們的數(shù)據(jù)和視圖做到隔離效果。
“flutter狀態(tài)管理Provider如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。