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

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

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

前言

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

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

計數(shù)器

還是以計數(shù)器為例，這次通過Provider實現(xiàn)，provider相較于bloc并沒有那么強制性分層，所以這里我們自己分為數(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() {
    // 獲取最新對象
    return PNumState()..num = num;
  }
}

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

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

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

/// 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: () {
            // 調(diào)用自增方法
              provider.add();
            },
            child: Icon(Icons.add),
          ),
          bottom: 20,
          right: 20,
        )
      ],
    );
  }
}

效果：

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

全局狀態(tài)

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

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

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

總結(jié)

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

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

您可能感興趣的文章: