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),
      ),
    );
  }
}