對(duì)于初學(xué)者，讓我們從對(duì) Flutter 狀態(tài)管理的基本概念理解，以及Flutter Riverpod倉庫的作用開始?；旧?，F(xiàn)lutter 確實(shí)會(huì)自行處理狀態(tài)管理，但是，隨著應(yīng)用程序的增長和擴(kuò)展，您可能需要與多個(gè)類共享應(yīng)用程序狀態(tài)。

Flutter 提供了許多用于管理應(yīng)用程序狀態(tài)的選項(xiàng)。在這里，我們將討論Riverpod。

什么是 Riverpod Flutter？

Riverpod 是 Flutter/Dart 的響應(yīng)式緩存框架。它可以自動(dòng)獲取、緩存、組合和重新計(jì)算網(wǎng)絡(luò)請(qǐng)求，同時(shí)還為您處理錯(cuò)誤。它是 Provider 包的重構(gòu)；這意味著它減少了依賴性。

然而，在 Riverpod 與 Provider 的戰(zhàn)斗中，Riverpod 相對(duì)于 Provider 的優(yōu)勢是：

?? 你不會(huì)再得到 'provider not found' 異常
?? 你可以定義全局提供者
?? 你可以顯著簡化“提供者”的組合，而不是繁瑣且容易出錯(cuò)的 ProxyProvider。

Riverpod Flutter 的用途：

?? 在編譯時(shí)而不是運(yùn)行時(shí)捕獲編程錯(cuò)誤
?? 輕松從遠(yuǎn)程源獲取、緩存和更新數(shù)據(jù)
?? 執(zhí)行反應(yīng)式緩存并輕松更新您的用戶界面
?? 依賴于異步或計(jì)算狀態(tài)
?? 編寫可測試代碼并將邏輯保持在小部件樹
?? 使用最少的樣板代碼創(chuàng)建、使用和組合提供程序
?? 在不再使用時(shí)處理提供程序的狀態(tài)

您是否希望通過過濾小部件重建或緩存昂貴的狀態(tài)計(jì)算來優(yōu)化您的 Flutter 應(yīng)用程序性能？
從我們這里聘請(qǐng)F(tuán)lutter 開發(fā)人員，他們將毫不費(fèi)力地處理您的應(yīng)用程序的狀態(tài)并提高其性能。

Flutter Rivepod 安裝

第一步是將最新的“flutter_riverpod”添加到'pubspec.yaml'文件作為依賴項(xiàng)。

依賴項(xiàng)：
  撲：
    SDK: 顫動(dòng)  
  flutter_riverpod：^2.0.2

提供商范圍

安裝 Riverpod 后，我們可以用 `ProviderScope` 包裝我們的根小部件：

無效主要（）{
  // 使用 ProviderScope 包裝整個(gè)應(yīng)用程序，以便小部件
  // 將能夠讀取提供者
  runApp(ProviderScope(
    孩子：我的應(yīng)用程序（），
  ));}

`ProviderScope` 是一個(gè)小部件，用于存儲(chǔ)我們創(chuàng)建的所有提供者的狀態(tài)

?? 它們完全取代了單例、服務(wù)定位器、依賴注入和 InheritedWidgets 等設(shè)計(jì)模式。
?? 它們?cè)试S您存儲(chǔ)一些狀態(tài)并在多個(gè)位置輕松訪問它。
?? 它們?cè)试S您通過過濾小部件重建或緩存昂貴的狀態(tài)計(jì)算來優(yōu)化性能。
?? 它們使您的代碼更具可測試性，因?yàn)槊總€(gè)提供者都可以被覆蓋以在測試期間表現(xiàn)不同。

創(chuàng)建和讀取提供者

這是一個(gè)使用 Provider 創(chuàng)建的簡單“Hello World”屏幕。

// 返回字符串值的提供者final helloWorldProvider = 提供者（（參考）{
  返回“你好世界”；});

這由三件事組成：

1. 聲明：`final helloWorldProvider` 是我們將用來讀取提供者狀態(tài)的全局變量
2. 提供者：`Provider< String >` 告訴我們正在使用的是哪種提供者（更多信息見下文), 以及它所持有的狀態(tài)的類型。
3. 創(chuàng)建狀態(tài)的函數(shù)。這為我們提供了一個(gè) ref 參數(shù)，我們可以使用它來讀取其他提供者、執(zhí)行一些自定義處理邏輯等等。

要在小部件內(nèi)使用此提供程序，您將需要一個(gè)引用對(duì)象。有 3 種方法可以實(shí)現(xiàn)：

1. 使用 ConsumerWidget

最簡單的方法是使用“ConsumerWidget”：

final helloWorldProvider = 提供者((_) => '你好世界');// 1. 小部件類現(xiàn)在擴(kuò)展 [ConsumerWidget]類 HelloWorldWidget 擴(kuò)展 ConsumerWidget {
  @覆蓋
  // 2. build 方法有一個(gè)額外的 [WidgetRef] 參數(shù)
  小部件構(gòu)建（BuildContext 上下文，WidgetRef ref）{
    // 3. 使用 ref.watch() 獲取提供者的值
    final helloWorld = ref.watch(helloWorldProvider);
    返回文本（你好世界）；
  }}

2.使用消費(fèi)者

作為替代方案，我們可以用 `Consumer` 包裝我們的 `Text` 小部件：

final helloWorldProvider = 提供者((_) => '你好世界');類 HelloWorldWidget 擴(kuò)展 StatelessWidget {
  @覆蓋
  小部件構(gòu)建（BuildContext 上下文）{
    // 1. 添加消費(fèi)者
    返回消費(fèi)者（
      // 2. 指定構(gòu)建器并獲取一個(gè)WidgetRef
      建造者：（_，WidgetRef ref，__）{
        // 3. 使用 ref.watch() 獲取提供者的值
        final helloWorld = ref.watch(helloWorldProvider);
        返回文本（你好世界）；
      },
    );
  }}

3. 使用ConsumerStatefulWidget & ConsumerState

final helloWorldProvider = 提供者((_) => '你好世界');// 1. 擴(kuò)展 [ConsumerStatefulWidget]類 HelloWorldWidget 擴(kuò)展 ConsumerStatefulWidget {
  @覆蓋
  消費(fèi)者狀態(tài)createState() => _HelloWorldWidgetState();}// 2. 擴(kuò)展 [ConsumerState]類 _HelloWorldWidgetState 擴(kuò)展了 ConsumerState{
  @覆蓋
  無效初始化狀態(tài)（）{
    super.initState();
    // 3. 如果需要，我們可以在 initState 中讀取提供者
    final helloWorld = ref.read(helloWorldProvider);
    打?。愫檬澜纾?；// “你好世界”
  }
  @覆蓋
  小部件構(gòu)建（BuildContext 上下文）{
    // 4. 使用 ref.watch() 獲取提供者的值
    final helloWorld = ref.watch(helloWorldProvider);
    返回文本（你好世界）；
  }}

結(jié)論

（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)，歡迎資訊！