快捷導(dǎo)航

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

更新時(shí)間：2022年11月01日 09:11:08 作者：老李code

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

前言

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相比較代碼較為簡潔，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。

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

您可能感興趣的文章: