我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter笔记1:Provider的使用正文

Flutter笔记1:Provider的使用

Flutter笔记1:Provider的使用详细笔记如下,其中遇到了一些坑,比如:
ChangeNotifierProvider(create: (_)=>Counter())
1、这里的create是新版本的,老版本是build,而教程是老版本
2、这里的listen参数是需要传false,而教程没有,因为老版本不需要。
1Provider.of<Counter>(context,listen: false).increment();
第一步,添加Provider依赖
1provider: ^4.0.4
第三方库pub地址:https://pub.dev/packages/provider

第二步,创建Model
这里的model实际上就是我们的状态,它不仅存储了我们的数据模型,还包含更新数据的的方法,并暴露出它想要的数据:
01import 'package:flutter/material.dart';
02  
03class Counter extends ChangeNotifier {
04  //存储数据
05  int _count = 0;
06  
07  //提供外部能够访问的数据
08  int get count => _count;
09  
10  void increment(){
11    _count++;
12    //通知所有听众进行刷新
13    notifyListeners();
14  }
15}
我们要存储的数据即_count,下划线代编私有,通过get把_count值暴露出来,并提供increment方法更新数据。这里使用了mixin的方式混入了ChangeNotifier,这个类能够帮助我们自动管理所有听众,当调用notifyListeners();时它会通知所有听众进行刷新。

第三步,创建顶层共享数据
这里使用MultiProvider可以创建多个共享数据,因为实际的应用不可能只有一个数据模型
01import 'package:flutter/material.dart';
02import 'package:flutter_provide/Counter.dart';
03import 'package:flutter_provide/FirstPage.dart';
04import 'package:provider/provider.dart';
05  
06void main() => runApp(MyApp());
07  
08class MyApp extends StatelessWidget {
09  @override
10  Widget build(BuildContext context) {
11    //使用MultiProvider可以创建多个顶层共享数据
12    return MultiProvider(
13      providers: [
14        ChangeNotifierProvider(create: (_)=>Counter())
15      ],
16      child: MaterialApp(
17        title: "Provider示例",
18        home: FirstPage(),
19      ),
20    );
21  }
22}
第四步,在子页面中获取状态
在这里编写两个页面FirstPage和SecondPage,获取顶层数据的方法使用的是
1Provider.of<T>(context)
其中T为泛型,本文代表的是Counter的数据Model,获取Counter里面的值代码如下
1Provider.of<Counter>(context).count
在两个页面均添加以上代码用于获取Counter的值,同时两个页面也可以改变Counter的值,使用方法如下所示
1Provider.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
1static T of<T>(BuildContext context, {bool listen = true})
2Provider.of<Counter>(context, listen: false).increment(这里也可以传参数);
当点击第一个页面的按钮之后,第二个页面也会随着数据增加展示相同的数据,如下图

从执行的结果来看,页面数据得到了共享,改变其中一个页面的值,也会影响到第二个页面的数据,完整的FirstPage和SecondPage代码如下

FirstPage代码:
01import 'package:flutter/material.dart';
02import 'package:flutter_provide/SecondPage.dart';
03import 'package:provider/provider.dart';
04import 'package:flutter_provide/Counter.dart';
05  
06class FirstPage extends StatelessWidget {
07  @override
08  Widget build(BuildContext context) {
09    // TODO: implement build
10    return Scaffold(
11      appBar: AppBar(
12        title: Text("第一个页面"),
13        actions: <Widget>[
14          FlatButton(
15            child: Text("下一页"),
16            onPressed: () => {
17              Navigator.push(context, MaterialPageRoute(builder: (context) {
18                return SecondPage();
19              })),
20            },
21          )
22        ],
23      ),
24      body: Center(
25        child: Text("${Provider.of<Counter>(context).count}"),
26      ),
27      floatingActionButton: FloatingActionButton(
28        onPressed: (){
29          Provider.of<Counter>(context,listen: false).increment();
30        },
31        child: Icon(Icons.add),
32      ),
33    );
34  }
35}
SecondPage代码:
01import 'package:flutter/material.dart';
02import 'package:flutter_provide/Counter.dart';
03import 'package:provider/provider.dart';
04  
05class SecondPage extends StatelessWidget{
06  @override
07  Widget build(BuildContext context) {
08    return Scaffold(
09      appBar: AppBar(
10        title: Text('第二个页面'),
11      ),
12      body: Center(
13        child: Text("${Provider.of<Counter>(context).count}"),
14      ),
15      floatingActionButton: FloatingActionButton(
16        onPressed: (){
17          Provider.of<Counter>(context,listen: false).increment();
18        },
19        child: Icon(Icons.add),
20      ),
21    );
22  }
23}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:flutter Provider.of without passing `listen: false`. 下一篇:Flutter笔记2:Align-对齐组件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢