Flutter 狀態管理之 ChangeNotifierProvider（Provider）

mclzone發表於2019-05-17
FlutterIDE

Provider 是 Google I/O 2019 大會上宣佈的現在官方推薦的狀態管理方式，而 ChangeNotifierProvider 可以說是 Provider 的一種。

Provider GitHub 地址：github.com/rrousselGit…

再貼一個油管上的視訊：www.youtube.com/watch?v=xcS…

OK，那廢話不多說。下面具體看看如何使用 ChangeNotifierProvider 做狀態管理。

通過一個 demo 來展示 ChangeNotifierProvider 的使用。該 demo 實現的功能很簡單，計數 + 切換主題。僅有兩個頁面，兩個頁面共享相同的資料。

效果圖：

Flutter 狀態管理之 ChangeNotifierProvider（Provider）

我已經將這個小 demo 上傳至 GitHub：github.com/MzoneCL/flu…

第一步： 新增依賴

在 pubspec.yaml 檔案中新增依賴。

Flutter 狀態管理之 ChangeNotifierProvider（Provider）

provider 包 pub 地址：pub.dev/packages/pr…

第二步：建立共享資料類

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class DataInfo with ChangeNotifier {
  int _count = 0;
  ThemeData _themeData = ThemeData.light();

  get count => _count;
  get themeData => _themeData;

  addCount() {
    _count++;
    notifyListeners();
  }
  subCount() {
    _count--;
    notifyListeners();
  }
  changeTheme() {
    if (_themeData == ThemeData.light()) {
      _themeData = ThemeData.dark();
    } else {
      _themeData = ThemeData.light();
    }
    notifyListeners();
  }
}
複製程式碼

資料類需要 with ChangeNotifier 以使用 notifyListeners() 函式通知監聽者以更新介面。

第三步：獲取資料

Provider 獲取資料狀態有兩種方式：

  1. 使用 Provider.of(context) 獲取 DataInfo
  2. 使用 Consumer

不過這兩種方式都需要在頂層套上ChangeNotifierProvider():

Flutter 狀態管理之 ChangeNotifierProvider（Provider）

1. 使用 Provider.of(context) 獲取 DataInfo

例如，指定主題部分的程式碼如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataInfo = Provider.of<DataInfo>(context);
    return MaterialApp(
      home: MyHomePage(),
      theme: dataInfo.themeData,
    );
  }
}
複製程式碼

通過Provider.of<DataInfo>(context) 獲取 DataInfo 例項，需要在 of 函式後指明具體的資料類。然後就可以直接通過 getter 訪問到 themeData 了。

2.使用 Consumer

同樣，以指定主題部分程式碼為例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<DataInfo>(
      builder: (context, dataInfo, _) => MaterialApp(
            home: MyHomePage(),
            theme: dataInfo.themeData,
          ),
    );
  }
}
複製程式碼

直接用 Consumer 包住需要使用共享資料的 Widget，同樣的，Consumer 也要指明型別。

OK，以上就是 ChangeNotifierProvider 的基本使用了。

相關文章