日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter狀態管理Provider的使用示例詳解_Android

作者：老李code ? 更新時間： 2022-12-04 編程語言

前言

Provider是三大主流狀態管理框架官方推薦使用的框架，它是基于官方數據共享組件InheritedWidget實現的，通過數據改變調用生命周期中的didChangeDependencies()方法，來實現狀態的通知改變。

InheritedWidget的使用可以參考我之前的這篇Flutter中幾種數據傳遞的應用總結。

計數器

還是以計數器為例，這次通過Provider實現，provider相較于bloc并沒有那么強制性分層，所以這里我們自己分為數據層(state)、邏輯處理層(provider)、UI層(view)。

首先創建文件夾：

數據層： 用來保存數據，基本和bloc一樣。

/// 數據層
class PNumState {
  int num;
  // 初始化
  PNumState({this.num = 0});
  PNumState clone() {
    // 獲取最新對象
    return PNumState()..num = num;
  }
}

業務邏輯層 ChangeNotifier： 用來處理頁面的邏輯，和bloc相比較代碼較為簡潔，ChangeNotifier繼承自Listenable,Listenable是一個維護監聽者列表的對象，通過它我們可以調用notifyListeners();方法發送通知監聽者實現頁面狀態的更新。

/// 業務邏輯層
class PNumProvider extends ChangeNotifier {
 /// 初始化數據對象
  final state = PNumState(num: 0);
  /// 自增計數方法
  add() {
    state.num++;
    notifyListeners();
  }
}

UI層： 根結點返回ChangeNotifierProvider,通過它可以讓provider實例和頁面所有子節點進行綁定，實現create方法和builder方法分別返回provider和我們的頁面Widget。 對于需要更新的組件使用Consumer<P>包裹，當范型里的實例調用notifyListeners的時候， builder返回的Widget將得到通知，從而達到數據的更新。

/// UI層
class PNumPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // 通過ChangeNotifierProvider將UI層和邏輯層進行綁定
    return ChangeNotifierProvider(
      create: (BuildContext context) => PNumProvider(),
      builder: (context, child) => _buildPage(context),
    );
  }
  Widget _buildPage(BuildContext context) {
  // 獲取provider示例
    final provider = context.read<PNumProvider>();
    return Stack(
      children: [
        Consumer<PNumProvider>(
          builder: (context, provider, child) {
          // builder方法回返回provider實例，和上面獲取的實例一樣
            return Center(child: Text("點擊了${provider.state.num}次"));
          },
        ),
        Positioned(
          child: FloatingActionButton(
            onPressed: () {
            // 調用自增方法
              provider.add();
            },
            child: Icon(Icons.add),
          ),
          bottom: 20,
          right: 20,
        )
      ],
    );
  }
}

效果：

當然上方的代碼也可以通過小呆呆的插件自動生成。

全局狀態

provider全局狀態使用也非常的方便，我們剛才的邏輯層需要在頂層runApp方法里進行初始化provider，使用MultiProvider可以同時管理多個全局狀態。

//全部狀態管理
class Status {
  // 全局初始化
  static Widget init(Widget child) {
    //使用 MultiProvider 設置多個Provider 狀態
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
        // 全局管理app主題
            create: (_) => AppTheme(AppTheme.getDefaultTheme())),
      ],
      child: child,
    );
  }
}
// 在 runApp方法之前初始化
runApp(Status.init(MyApp()));

在接收的地方還是一樣使用Consumer包裹組件，代碼略...

總結

provider相較于bloc沒有強制的分層，即使是數據也是我們自己分出來的，不分出來直接寫在邏輯層也是可以的，所以provider的使用感覺更加的靈活一些。對于不同項目我們可以使用不同的框架，開發人多建議bloc強制代碼分層,如果人少就provider。

原文鏈接：https://juejin.cn/post/7160632051308167175

欄目分類
最近更新