Flutter笔记1:Provider的使用详细笔记如下,其中遇到了一些坑,比如:
ChangeNotifierProvider(create: (_)=>Counter())
1、这里的create是新版本的,老版本是build,而教程是老版本
2、这里的listen参数是需要传false,而教程没有,因为老版本不需要。
1 | Provider.of<Counter>(context,listen: false ).increment(); |
第一步,添加Provider依赖
第三方库pub地址:https://pub.dev/packages/provider
第二步,创建Model
这里的model实际上就是我们的状态,它不仅存储了我们的数据模型,还包含更新数据的的方法,并暴露出它想要的数据:
01 | import 'package:flutter/material.dart' ; |
03 | class Counter extends ChangeNotifier { |
08 | int get count => _count; |
我们要存储的数据即_count,下划线代编私有,通过get把_count值暴露出来,并提供increment方法更新数据。这里使用了mixin的方式混入了ChangeNotifier,这个类能够帮助我们自动管理所有听众,当调用notifyListeners();时它会通知所有听众进行刷新。
第三步,创建顶层共享数据
这里使用MultiProvider可以创建多个共享数据,因为实际的应用不可能只有一个数据模型
01 | import 'package:flutter/material.dart' ; |
02 | import 'package:flutter_provide/Counter.dart' ; |
03 | import 'package:flutter_provide/FirstPage.dart' ; |
04 | import 'package:provider/provider.dart' ; |
06 | void main() => runApp(MyApp()); |
08 | class MyApp extends StatelessWidget { |
10 | Widget build(BuildContext context) { |
14 | ChangeNotifierProvider(create: (_)=>Counter()) |
第四步,在子页面中获取状态
在这里编写两个页面FirstPage和SecondPage,获取顶层数据的方法使用的是
其中T为泛型,本文代表的是Counter的数据Model,获取Counter里面的值代码如下
1 | Provider.of<Counter>(context).count |
在两个页面均添加以上代码用于获取Counter的值,同时两个页面也可以改变Counter的值,使用方法如下所示
1 | 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
1 | static T of<T>(BuildContext context, {bool listen = true }) |
2 | Provider.of<Counter>(context, listen: false ).increment(这里也可以传参数); |
当点击第一个页面的按钮之后,第二个页面也会随着数据增加展示相同的数据,如下图
从执行的结果来看,页面数据得到了共享,改变其中一个页面的值,也会影响到第二个页面的数据,完整的FirstPage和SecondPage代码如下
FirstPage代码:
01 | import 'package:flutter/material.dart' ; |
02 | import 'package:flutter_provide/SecondPage.dart' ; |
03 | import 'package:provider/provider.dart' ; |
04 | import 'package:flutter_provide/Counter.dart' ; |
06 | class FirstPage extends StatelessWidget { |
08 | Widget build(BuildContext context) { |
17 | Navigator.push(context, MaterialPageRoute(builder: (context) { |
25 | child: Text( "${Provider.of<Counter>(context).count}" ), |
27 | floatingActionButton: FloatingActionButton( |
29 | Provider.of<Counter>(context,listen: false ).increment(); |
31 | child: Icon(Icons.add), |
SecondPage代码:
01 | import 'package:flutter/material.dart' ; |
02 | import 'package:flutter_provide/Counter.dart' ; |
03 | import 'package:provider/provider.dart' ; |
05 | class SecondPage extends StatelessWidget{ |
07 | Widget build(BuildContext context) { |
13 | child: Text( "${Provider.of<Counter>(context).count}" ), |
15 | floatingActionButton: FloatingActionButton( |
17 | Provider.of<Counter>(context,listen: false ).increment(); |
19 | child: Icon(Icons.add), |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!