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

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Flutter狀態(tài)管理Provider的使用示例詳解_Android

作者:老李code ? 更新時(shí)間: 2022-12-04 編程語言

前言

Provider是三大主流狀態(tài)管理框架官方推薦使用的框架,它是基于官方數(shù)據(jù)共享組件InheritedWidget實(shí)現(xiàn)的,通過數(shù)據(jù)改變調(diào)用生命周期中的didChangeDependencies()方法,來實(shí)現(xiàn)狀態(tài)的通知改變。

InheritedWidget的使用可以參考我之前的這篇Flutter中幾種數(shù)據(jù)傳遞的應(yīng)用總結(jié)。

計(jì)數(shù)器

還是以計(jì)數(shù)器為例,這次通過Provider實(shí)現(xiàn),provider相較于bloc并沒有那么強(qiáng)制性分層,所以這里我們自己分為數(shù)據(jù)層(state)、邏輯處理層(provider)、UI層(view)。

首先創(chuàng)建文件夾:

數(shù)據(jù)層: 用來保存數(shù)據(jù),基本和bloc一樣。

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

業(yè)務(wù)邏輯層 ChangeNotifier: 用來處理頁面的邏輯,和bloc相比較代碼較為簡(jiǎn)潔,ChangeNotifier繼承自Listenable,Listenable是一個(gè)維護(hù)監(jiān)聽者列表的對(duì)象,通過它我們可以調(diào)用notifyListeners();方法發(fā)送通知監(jiān)聽者實(shí)現(xiàn)頁面狀態(tài)的更新。

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

UI層: 根結(jié)點(diǎn)返回ChangeNotifierProvider,通過它可以讓provider實(shí)例和頁面所有子節(jié)點(diǎn)進(jìn)行綁定,實(shí)現(xiàn)create方法和builder方法分別返回provider和我們的頁面Widget。 對(duì)于需要更新的組件使用Consumer<P>包裹,當(dāng)范型里的實(shí)例調(diào)用notifyListeners的時(shí)候, builder返回的Widget將得到通知,從而達(dá)到數(shù)據(jù)的更新。

/// UI層
class PNumPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // 通過ChangeNotifierProvider將UI層和邏輯層進(jìn)行綁定
    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實(shí)例,和上面獲取的實(shí)例一樣
            return Center(child: Text("點(diǎn)擊了${provider.state.num}次"));
          },
        ),
        Positioned(
          child: FloatingActionButton(
            onPressed: () {
            // 調(diào)用自增方法
              provider.add();
            },
            child: Icon(Icons.add),
          ),
          bottom: 20,
          right: 20,
        )
      ],
    );
  }
}

效果:

當(dāng)然上方的代碼也可以通過小呆呆的插件自動(dòng)生成。

全局狀態(tài)

provider全局狀態(tài)使用也非常的方便,我們剛才的邏輯層需要在頂層runApp方法里進(jìn)行初始化provider,使用MultiProvider可以同時(shí)管理多個(gè)全局狀態(tài)。

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

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

總結(jié)

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

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

欄目分類
最近更新