快捷導(dǎo)航

flutter狀態(tài)管理Provider的使用學(xué)習(xí)

更新時(shí)間：2022年07月20日 14:40:31 作者：潛水的魚(yú)兒

這篇文章主要為大家介紹了flutter狀態(tài)管理Provider的使用學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. provider的使用

網(wǎng)上也有很多關(guān)于provider說(shuō)明，也可以看下官方的provider的 README。這里我記錄一下我自己學(xué)習(xí)。
我們對(duì)于簡(jiǎn)單的數(shù)據(jù)共享可以設(shè)置參數(shù)，之后子頁(yè)面進(jìn)行數(shù)據(jù)方法回調(diào)，從而完成數(shù)據(jù)間的通信。但是比較麻煩，下面我們看下我們使用provider如何達(dá)到這個(gè)效果。

我們2個(gè)頁(yè)面使用同一個(gè)數(shù)據(jù)，在第二個(gè)頁(yè)面使用點(diǎn)擊增加方法。之后返回在第一個(gè)頁(yè)面也顯示出增加后的數(shù)據(jù)count達(dá)到同步的效果。

點(diǎn)擊增加

看下代碼實(shí)現(xiàn)首先是使用StatelessWidget來(lái)顯示頁(yè)面，簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)就不展示了。我們定義一個(gè)model用來(lái)存儲(chǔ)我們的count，我么混入通過(guò)混入 ChangeNotifier 管理監(jiān)聽(tīng)者（通知模式）。我們寫(xiě)讀數(shù)據(jù)，并且當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候，使用通知更新數(shù)據(jù)。

class CountModel with ChangeNotifier {
  int _count = 0;
  // 讀方法
  int get counter =&gt; _count;
  // 寫(xiě)方法
  void increment() {
    _count++;
    notifyListeners(); // 通知監(jiān)聽(tīng)者刷新
  }
}

我們2個(gè)頁(yè)面都要使用這個(gè)數(shù)據(jù)，我們要把這個(gè)數(shù)據(jù)放在這2個(gè)子頁(yè)面的父節(jié)點(diǎn)上。通過(guò) Provider 組件封裝數(shù)據(jù)資源，value就是需要共享的數(shù)據(jù)資源

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // 通過(guò) Provider 組件封裝數(shù)據(jù)資源
    return ChangeNotifierProvider.value(
        value: CountModel(), // 需要共享的數(shù)據(jù)資源
        child: MaterialApp(
          home: FirstPage(),
        ));
  }
}

我們?cè)陧?yè)面使用的地方進(jìn)行取數(shù)據(jù)

final _counter = Provider.of<CountModel>(context);

上下文就包含了我們父節(jié)點(diǎn)中設(shè)置的value 即CountModel()。

// 第一個(gè)頁(yè)面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 取出數(shù)據(jù)
    final _counter = Provider.of&lt;CountModel&gt;(context);
    return Scaffold(
        appBar: AppBar(
          title: const Text('第一個(gè)頁(yè)面'),
        ),
        body: Center(
          child: Text('第一個(gè)頁(yè)面count:${_counter.counter}'),
        ),
        // 跳轉(zhuǎn)到 SecondPage
        floatingActionButton: FloatingActionButton(
            child: const Icon(Icons.next_plan),
            onPressed: () =&gt; Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) =&gt; SecondPage()))));
  }
}
// 第二個(gè)頁(yè)面
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 取出數(shù)據(jù)
    final _counter = Provider.of&lt;CountModel&gt;(context);
    return Scaffold(
        appBar: AppBar(
          title: const Text('第二個(gè)頁(yè)面'),
        ),
        // 展示資源中的數(shù)據(jù)
        body: Center(
          child: Text('第二個(gè)頁(yè)面count:${_counter.counter}'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _counter.increment,
          child: const Icon(Icons.add),
        ),
    );
  }
}

通過(guò)provider很簡(jiǎn)單的達(dá)到了我們的數(shù)據(jù)共享，同時(shí)通過(guò)通知讓我們的頁(yè)面進(jìn)行了刷新。

2. 控制Widget的刷新顆粒度

我們上面的頁(yè)面中涉及的Widget變化也就是一個(gè)文字的展示，沒(méi)有必要整個(gè)頁(yè)面都刷新，這樣可以提高我們的性能。

我們把我們Icon換成自定義的，可以發(fā)現(xiàn)當(dāng)我們點(diǎn)擊的時(shí)候就會(huì)一直重新build，實(shí)際我們不需要他們變化，那么我們只要我們那個(gè)Widget使用了數(shù)據(jù)，我們刷新該Widget即可。我們就要使用Consumer

final Widget Function(
  BuildContext context,
  T value,
  Widget? child,
) builder;

定義child為我們包裹的widget，T為我們model的類(lèi)型。

body: Center(
  child: Consumer<CountModel>(
    builder: (context,CountModel counter,_) => Text('第二個(gè)頁(yè)面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隔離開(kāi)，這樣我們就可以是我們的數(shù)據(jù)和視圖做到隔離效果。

3. 小結(jié)

對(duì)于數(shù)據(jù)共享和數(shù)據(jù)傳遞provider組件確實(shí)提供了我們快捷的方式，我們?cè)谑褂玫倪^(guò)程中要注意provider組件位于父節(jié)點(diǎn)位置，這樣子節(jié)點(diǎn)才能共享數(shù)據(jù)狀態(tài)，其次我們盡可能的減少我們刷新的顆粒度，最好在使用數(shù)據(jù)的地方進(jìn)行刷新組件。

以上就是flutter狀態(tài)管理Provider的使用學(xué)習(xí)的詳細(xì)內(nèi)容，更多關(guān)于flutter狀態(tài)管理Provider的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: