首页 > 建站教程 > APP开发,混合APP >  Flutter笔记1：Provider的使用正文

Flutter笔记1：Provider的使用

Flutter笔记1：Provider的使用详细笔记如下，其中遇到了一些坑，比如：
ChangeNotifierProvider(create: (_)=>Counter())
1、这里的create是新版本的，老版本是build，而教程是老版本
2、这里的listen参数是需要传false，而教程没有，因为老版本不需要。 
Provider.of<Counter>(context,listen: false).increment();
第一步，添加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),
      ),
    );
  }
}

TAGS: Flutter  Provider