自己寫一個Provider

o動感超人o發表於2020-06-11

在以前我寫過一篇文章，教你如何實現Flutter的BLoC框架（juejin.im/post/5cb80c… ），這個BLoC的實現，模仿android開發中的MVVM開發方式，利用Flutter的Stream，在資料改變的時候，由Stream推送資料給UI層，然後UI層自動更新UI。這次我們來自己實現一個Provider，這個也是Flutter中最常用的狀態管理框架，由我們自己實現Provider，來了解Provider內部核心原理。

首先，在上一篇文章中（InheritWidget原理解析：juejin.im/post/5edb97… ），我們檢視輸出日誌發現一個問題，就是點選“數字+1”這個按鈕的時候，“數字+1”這個按鈕也重新整理了（日誌輸出CustomRaisedButton build），這是因為我們呼叫的setState方法是BodyWidgetState這個類的方法，所以BodyWidget和它的child widget都重建了，而我們的需求是InheritedWidget的資料改變的時候只重新整理依賴此InheritedWidget的widget，要做到這一點，我們就不能呼叫BodyWidgetState的setState方法，而只呼叫InheritedWidget上一個節點的setState，也就是說要把InheritedWidget作為一個StatefulWidget的child。然後我們分步驟編寫程式碼：

建立可被監聽的資料管理類，為什麼我們不直接讓InheritedWidget成為可被監聽的型別呢？這是因為InheritedWidget只是提供資料，資料的消費者應該持有的是資料而不是InheritedWidget，否則資料消費者如果持有InheritedWidget的話，修改具體資料的方法就要新增到InheritedWidget裡，而資料型別是多種多樣的，不可能全部寫到InheritedWidget裡，所以我們要建立可被監聽的資料管理類，這樣當資料發生變化的時候，呼叫資料管理類的方法，資料管理類再通知該類的監聽者
建立InheritedWidget子類，用來儲存資料管理類，該類可以在重建以後通知所有依賴了該類的widget
建立StatefulWidget，這裡我們起名為ProviderCreator，用來儲存實際顯示的Widget和可被監聽的資料管理類，並根據兩者建立InheritedWidget，並監聽資料管理類的變化。這樣可以在資料管理類中的資料發生變化的時候可以通過ProviderCreator對應的State呼叫setState來讓InheritedWidget重建。InheritedWidget重建時如果ProviderCreator對應的Element沒有被銷燬的話，那這個ProviderCreator內部的可被監聽的資料管理類和實際顯示的child就被快取起來了（注意：這個child是我們傳入的實際顯示的widget，而不是ProviderCreator對應的State的build方法裡返回的widget）

開始我們的程式碼編寫

1. 建立可被監聽的資料管理類

建立InheritedWidget子類的時候，裡面的資料可以是任意型別，但是我們需要在資料改變的時候通知監聽者，所以我們約束一下里面的資料型別必須是可被監聽的型別，在flutter裡，有一個類叫做ChangeNotifier，非常適合用來作為被監聽者，程式碼如下

class ChangeNotifier implements Listenable {
  ObserverList<VoidCallback> _listeners = ObserverList<VoidCallback>();

  @protected
  bool get hasListeners {
    return _listeners.isNotEmpty;
  }
  @override
  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }

  @override
  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }

  @mustCallSuper
  void dispose() {
    _listeners = null;
  }

  @protected
  @visibleForTesting
  void notifyListeners() {
    if (_listeners != null) {
      final List<VoidCallback> localListeners = List<VoidCallback>.from(_listeners);
      for (final VoidCallback listener in localListeners) {
        listener();
      }
    }
  }
}
複製程式碼

程式碼我簡化了一下，就是上面的樣子，我們的可被監聽的資料類都需要繼承該類

2. 建立`InheritedWidget`子類

因為該類用來提供可被監聽的資料管理類，所以起名叫`Provider`
複製程式碼

class Provider<T extends ChangeNotifier> extends InheritedWidget {
  final T data;

  Provider({Key key, this.data, Widget child}) : super(key: key, child: child) {
    print("Provider=$hashCode");
  }

  //定義一個便捷方法，方便子樹中的widget獲取共享資料
  static Provider<T> of<T extends ChangeNotifier>(BuildContext context, bool dependOn) {
    if (dependOn) {
      return context.dependOnInheritedWidgetOfExactType<Provider<T>>();
    } else {
      return context.getElementForInheritedWidgetOfExactType<Provider<T>>().widget as Provider<T>;
    }
  }

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    //在此簡單返回true，則每次更新都會呼叫依賴其的子孫節點的'didChangeDependencies'。
    return true;
  }
}
複製程式碼

3. 建立`StatefulWidget`，用來儲存實際顯示的`Widget`和可被監聽的資料管理類，並根據兩者建立`InheritedWidget`，並監聽資料管理類的變化。

class ProviderCreator<T extends ChangeNotifier> extends StatefulWidget {
  final T data;
  final Widget child;

  ProviderCreator({
    Key key,
    this.data,
    this.child,
  }) {
    print("ProviderCreator=$hashCode");
  }

  @override
  State<StatefulWidget> createState() {
    return ProviderCreatorState<T>();
  }
}

class ProviderCreatorState<T extends ChangeNotifier> extends State<ProviderCreator> {
  void update() {
    setState(() {});
  }

  @override
  void initState() {
    widget.data.addListener(update);
    super.initState();
  }

  @override
  void dispose() {
    widget.data.dispose();
    super.dispose();
  }

  @override
  void didUpdateWidget(ProviderCreator<ChangeNotifier> oldWidget) {
    //當Provider更新時，如果新舊資料不"=="，則解綁舊資料監聽，同時新增新資料監聽
    if (oldWidget.data != widget.data) {
      oldWidget.data.dispose();
      widget.data.addListener(update);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print("""CustomInheritedWidgetCreatorState build
        \twidget=${widget.hashCode}
        \twidget.data.hashCode=${widget.data.hashCode}
        \twidget.child=${widget.child.hashCode}""");
    return Provider<T>(
      data: widget.data,
      child: widget.child,
    );
  }
}
複製程式碼

示例

然後，我們用一個示例來試一下我們剛才自己寫的Provider 我們還用上篇文章裡的示例，用一個計數器程式來測試。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InheritWidget',
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: BodyWidget(),
        ),
      ),
    );
  }
}

class BodyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BodyWidgetState();
  }
}

class BodyWidgetState extends State<BodyWidget> {
  Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return ProviderCreator<Counter>(
      data: counter,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          //依賴
          DependOnInheritedWidget<Counter>(),
          //不依賴
          Builder(builder: (context) {
            return Text(Provider.of<Counter>(context, false).data.toString());
          }),
          Builder(builder: (context) {
            return CustomRaisedButton(
              onPressed: () {
                //不依賴
                Provider.of<Counter>(context, false).data.increment();
              },
              child: Text("數字+1"),
            );
          })
        ],
      ),
    );
  }
}

class Counter extends ChangeNotifier {
  int num = 0;

  void increment() {
    num++;
    notifyListeners();
  }

  @override
  String toString() {
    return "$num";
  }
}

class DependOnInheritedWidget<T extends ChangeNotifier> extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return DependOnInheritedWidgetState<T>();
  }
}

class DependOnInheritedWidgetState<T extends ChangeNotifier> extends State<DependOnInheritedWidget> {
  @override
  Widget build(BuildContext context) {
    print("DependOnInheritedWidgetState build");
    return Text(Provider.of<T>(context, true).data.toString());
  }

  @override
  void didChangeDependencies() {
    print("DependOnInheritedWidgetState didChangeDependencies");
    super.didChangeDependencies();
  }
}

class CustomRaisedButton extends RaisedButton {
  const CustomRaisedButton({
    @required VoidCallback onPressed,
    Widget child,
  }) : super(onPressed: onPressed, child: child);

  @override
  Widget build(BuildContext context) {
    print("CustomRaisedButton build");
    return super.build(context);
  }
}
複製程式碼

當我們點選“數字+1”這個按鈕的時候，會在日誌列印裡發現如下資訊：

I/flutter (  489): CustomInheritedWidgetCreatorState build
I/flutter (  489):         	widget=136741630
I/flutter (  489):         	widget.data.hashCode=597399651
I/flutter (  489):         	widget.child=443053943
I/flutter (  489): Provider=611638398
I/flutter (  489): DependOnInheritedWidgetState didChangeDependencies
I/flutter (  489): DependOnInheritedWidgetState build
複製程式碼

說明CustomRaisedButton不再build了，注意：Provider的of方法中的dependOn引數，為true說明呼叫了該方法的widget依賴了InheritedWidget，為false就沒有依賴InheritedWidget，具體的可以看dependOnInheritedWidgetOfExactType和getElementForInheritedWidgetOfExactType這兩個方法的原始碼，這裡不再贅述。

至此，我們做了一個簡單的Provider，大功告成！

自己寫一個mvc框架吧（一）
2019-02-01
MVC框架
自己寫一個Babel外掛
2018-09-16
Babel
手寫一個自己的Promise
2018-07-29
Promise
自己寫一個mvc框架吧（五）
2019-02-13
MVC框架
自己寫一個mvc框架吧（四）
2019-02-11
MVC框架
自己寫一個mvc框架吧（二）
2019-02-01
MVC框架
自己寫一個mvc框架吧（三）
2019-02-01
MVC框架
不如自己寫一個 schema 類庫吧
2019-01-14
自己寫一個vue的loading外掛
2019-04-09
Vue
如何自己寫一個網路爬蟲
2020-02-27
爬蟲
自己動手寫一個持久層框架
2020-11-10
框架
分享一個自己寫的C# SqlHelper
2019-05-11
C#SQL
自己手寫一個SpringMVC框架(簡化)
2021-09-09
SpringMVC框架
一文搞懂如何自己寫一個Python庫
2024-03-06
Python
自己寫的簡單的一個部落格
2019-05-11
webpack loader—自己寫一個按需載入外掛
2018-09-04
Web
論如何自己寫一個Python的模板語言
2020-11-11
Python
react 知識梳理（二）：手寫一個自己的 redux
2018-05-24
ReactRedux
試用 vue-admin-template 寫一個自己的dashboard
2018-09-01
Vue
15_編寫第一個自己的Linux的命令
2024-03-10
Linux
分享自己寫的一個 Python 的 JSON 轉 Model 庫
2020-05-19
PythonJSON
如何使用Typora寫出自己的第一個部落格
2024-08-14
五筆一級簡碼，自己寫了一個順口溜
2024-06-11
用原生Go寫一個自己的部落格-搭建專案（一）
2022-07-13
Go
Python，寫一個簡單的屬於自己的『BaseEnum』類
2019-03-04
Python
自己動手寫一個能操作redis的客戶端
2018-08-01
Redis客戶端
【redis前傳】自己手寫一個LRU策略 | redis淘汰策略
2021-06-25
Redis
開個腦洞，帶你寫一個自己的極狐GitLab CI Runner
2022-12-29
Gitlab
開源自己寫的一個拖拽庫，相容到IE8
2019-02-16
淺析jQuery原理並仿寫封裝一個自己的庫
2019-04-02
jQuery封裝
【譯】手摸手寫一個你自己的 React Router v4
2019-01-17
React
併發程式設計 —— 自己寫一個非同步回撥 API
2018-04-30
程式設計非同步API
React 知識梳理（三）：手寫一個自己的 React-redux
2018-06-21
ReactRedux
發一個自己寫的簡單32位遊戲保護
2018-04-23
遊戲
淺析MyBatis（二）：手寫一個自己的MyBatis簡單框架
2021-03-16
MyBatis框架
自己動手寫個 Android客戶端
2018-04-26
Android客戶端
分享一個自己閱讀 Laravel 原始碼寫的一個簡易框架,可用於學習
2019-10-13
Laravel原始碼框架
自己造一個ReactDOM
2021-11-25
React

自己寫一個Provider

1. 建立可被監聽的資料管理類

2. 建立InheritedWidget子類

3. 建立StatefulWidget，用來儲存實際顯示的Widget和可被監聽的資料管理類，並根據兩者建立InheritedWidget，並監聽資料管理類的變化。

示例

相關文章

2. 建立`InheritedWidget`子類

3. 建立`StatefulWidget`，用來儲存實際顯示的`Widget`和可被監聽的資料管理類，並根據兩者建立`InheritedWidget`，並監聽資料管理類的變化。