Flutter狀態管理Provider的簡單使用

 

學習Flutter一段時間了，前幾天小夥伴在看唯鹿項目的時候提到的provider，多數人都是用redux，之前在做react-native項目的時候使用的是redux，但是對於Flutter還是新的認識,後來在博客上觸到google推薦的Provider，於是小小的學習了下,按照亢少軍老師的《Flutter技術入門與實戰》的計數器的小例子進行記錄學習下:

第一步，添加Provider依賴

provider: ^4.0.4

第三方庫pub地址：https://pub.dev/packages/provider

 

第二步，創建Model.

這裏的model實際上就是我們的狀態,它不僅存儲了我們的數據模型,還包含更新數據的的方法,並暴露出它想要的數據:

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  //存儲數據
  int _count = 0;

  //提供外部能夠訪問的數據
  int get count => _count;

  void increment(){
    _count++;
    //通知所有聽衆進行刷新
    notifyListeners();
  }
}

我們要存儲的數據即_count,下劃線代編私有,通過get把_count值暴露出來,並提供increment方法更新數據.

治理使用了mixin的方式混入了ChangeNotifier,這個類能夠幫助我們自動管理所有聽衆,當調用notifyListeners();時它會通知所有聽衆進行刷新

第三步，創建頂層共享數據

這裏使用MultiProvider可以創建多個共享數據,因爲實際的應用不可能只有一個數據模型

import 'package:flutter/material.dart';
import 'package:flutter_provide/Counter.dart';
import 'package:flutter_provide/FirstPage.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //使用MultiProvider可以創建多個頂層共享數據
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_)=>Counter())
      ],
      child: MaterialApp(
        title: "Provider示例",
        home: FirstPage(),
      ),
    );
  }
}

第四步，在子頁面中獲取狀態

在這裏編寫兩個頁面FirstPage和SecondPage,獲取頂層數據的方法使用的是

Provider.of<T>(context)

其中T爲泛型,本文代表的是Counter的數據Model,獲取Counter裏面的值代碼如下

Provider.of<Counter>(context).count

在兩個頁面均添加以上代碼用於獲取Counter的值,同時兩個頁面也可以改變Counter的值,使用方法如下所示

Provider.of<Counter>(context,listen: false).increment();

其中context代表上學文對象,listen必須要寫否則會報:

Tried to listen to a value exposed with provider, from outside of the widget tree.

This is likely caused by an event handler (like a button's onPressed) that called
Provider.of without passing `listen: false`.

To fix, write:
Provider.of<Counter>(context, listen: false);

It is unsupported because may pointlessly rebuild the widget associated to the
event handler, when the widget tree doesn't care about the value.

源碼中listen默認爲true

static T of<T>(BuildContext context, {bool listen = true})

Provider.of<Counter>(context, listen: false).increment(這裏也可以傳參數);

 當點擊第一個頁面的按鈕之後,第二個頁面也會隨着數據增加展示相同的數據,如下圖

從執行的結果來看,頁面數據得到了共享,改變其中一個頁面的值,也會影響到第二個頁面的數據,完整的FirstPage和SecondPage代碼如下

FirstPage代碼:

import 'package:flutter/material.dart';
import 'package:flutter_provide/SecondPage.dart';
import 'package:provider/provider.dart';
import 'package:flutter_provide/Counter.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("第一個頁面"),
        actions: <Widget>[
          FlatButton(
            child: Text("下一頁"),
            onPressed: () => {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return SecondPage();
              })),
            },
          )
        ],
      ),
      body: Center(
        child: Text("${Provider.of<Counter>(context).count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Provider.of<Counter>(context,listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

SecondPage代碼:

import 'package:flutter/material.dart';
import 'package:flutter_provide/Counter.dart';
import 'package:provider/provider.dart';

class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二個頁面'),
      ),
      body: Center(
        child: Text("${Provider.of<Counter>(context).count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Provider.of<Counter>(context,listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}