（轉）flutter 新狀態管理方案 Provide (一)-使用

flutter 新狀態管理方案 Provide (一)-使用

 

 

版權聲明：本文為博主原創文章，基於CC4.0協議，首發於https://kikt.top ,同步發於csdn,轉載必須注明出處! https://blog.csdn.net/qq_28478281/article/details/87858386

開這篇文章是因為看到這個庫被托管在google的倉庫下,而且說明是被設計出來替代ScopedModel的,而且更加靈活

支持Builder模式和StreamBuilder模式,全局,局部都可以

內部應該是結合InheritedWidget Notification體系實現的

傳統的bloc需要在每一個Repository中創建StreamController和Stream,甚至有的文章中,一個監聽的修改需要修改5處,維護起來比較麻煩

相比較而言Provide維護起來會稍微省事一些

入門級倉庫地址

添加依賴

查看pub-install

dependencies:
  provide: ^1.0.1 # 這里的版本查看官方

 

flutter packages get

import 'package:provide/provide.dart';

使用方法

這里以簡單的Counter為例
也就是在flutter的hello world工程的基礎上來修改

1. 定義一個Model

這個model需要繼承ChangeNotifier

class Counter with ChangeNotifier {
  int _value;

  int get value => _value;

  Counter(this._value);

  void inc() {
    _value++;
    notifyListeners(); //父類的方法,發出通知
  }
}

2. 定義一個全局的Provide

這里雖然定義在全局,但事實上也可以定義在頁面級

void main() {
  var providers = Providers()..provide(Provider.function((ctx) => Counter(0)));

  runApp(
    ProviderNode(
      child: MyApp(),
      providers: providers,
    ),
  );
}

 

 

 

ProviderNode表示的是提供者

3. 界面/監聽

修改_MyHomePageState

添加一個方法,用於獲取Counter實例

Counter get _counter => Provide.value<Counter>(context);

 

---

將原來的Text(_counter)修改一下

這里的Provide會在Counter發生變化的時候,觸發builder回調來更新界面

Provide<Counter>(
    builder: (BuildContext context, Widget child, Counter counter) {
        return Text(
            '${counter.value}',
            style: Theme.of(context).textTheme.display1,
        );
    },
),

 

 

 

4. 發出通知

接着就是發出通知了

修改floatingActionButton的點擊事件

floatingActionButton: FloatingActionButton(
  onPressed: () => _counter.inc(),
  tooltip: 'Increment',
  child: Icon(Icons.add),
),

 

 

這里調用第三步獲取的那個Counter,然后調用inc方法

---

看到這里,如果之前用過ScopedModel的朋友會問了,這個不是和以前一樣嗎,我為啥要改呢

繼續修改

5. Stream模式

這個就很類似於bloc了,只不過model不太一樣

添加一個StreamBuilder

StreamBuilder<Counter>(
  initialData: _counter,
  stream: Provide.stream<Counter>(context),
  builder: (BuildContext context, AsyncSnapshot<Counter> snapshot) {
    return Text(
      '${snapshot.data.value}',
      style: Theme.of(context).textTheme.display1,
    );
  },
),

 

 

這里initialData是第三步創建的那個,stream是使用Provide.stream<Counter>(context)獲取的

scope

在provide中有一個概念叫scope,類的完整類名叫ProviderScope

class ProviderScope {
  final String _name;

  /// Constructor
  const ProviderScope(this._name);

  @override
  String toString() {
    return "Scope ('$_name')";
  }
}

 

 

這個類的作用就是標識Provider的區域,或者可以理解為給Provider/Provide定義一個作用區域

只有scope相同的才可以識別

將state的代碼修改一下

class _MyHomePageState extends State<MyHomePage> {
  Counter get _counter => Provide.value<Counter>(context);

  PageCounter pageCounter = PageCounter(0);
  PageCounter pageCounter2 = PageCounter(0);
  var scope1 = ProviderScope("1"); 
  var scope2 = ProviderScope("2");
  @override
  Widget build(BuildContext context) {
    return ProviderNode(
      providers: Providers()
        ..provide(Provider.value(pageCounter), scope: scope1)
        ..provide(Provider.value(pageCounter2), scope: scope2),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Provide<PageCounter>(
                scope: scope1,
                builder:
                    (BuildContext context, Widget child, PageCounter counter) {
                  return Text(
                    '${counter.value}',
                    style: Theme.of(context).textTheme.display1,
                  );
                },
              ),
              Provide<PageCounter>(
                scope: scope2,
                builder:
                    (BuildContext context, Widget child, PageCounter counter) {
                  return Text(
                    '${counter.value}',
                    style: Theme.of(context).textTheme.display1,
                  );
                },
              ),
              StreamBuilder<Counter>(
                initialData: _counter,
                stream: Provide.stream<Counter>(context),
                builder:
                    (BuildContext context, AsyncSnapshot<Counter> snapshot) {
                  return Text(
                    '${snapshot.data.value}',
                    style: Theme.of(context).textTheme.display1,
                  );
                },
              ),
              FlatButton(
                child: Text("nextPage"),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return MyHomePage(
                      title: "new page",
                    );
                  }));
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _counter.inc();
            pageCounter.inc();
            pageCounter2.rec();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

 

 

 

這里定義了兩個scope,並在Provide時進行了指定

Provide<PageCounter>(
  scope: scope1,
  builder:
      (BuildContext context, Widget child, PageCounter counter) {
    return Text(
      '${counter.value}',
      style: Theme.of(context).textTheme.display1,
    );
  },
),

 

 

這樣只有當對應scope1的counter發出通知時,這里才會回調,這樣就滿足了一個頁面/一個應用中有兩個相同對象的識別問題

后記

這個插件托管在google倉庫下,個人覺得應該是官方很推薦的一種狀態管理模式