请选择 进入手机版 | 继续访问电脑版

Flutter状态管理 --- provider

[复制链接]
云韵 发表于 2021-1-1 18:30:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
话不多说,直接上代码,首先参加相关的设置
  1. dependencies:  flutter:    sdk: flutter  provider: ^4.3.2
复制代码
  1. import 'package:provider/provider.dart';
复制代码
新增MyModel类,作为要让Provider提供出去的值,延迟2s后自增
  1. class MyModel with ChangeNotifier {  MyModel({this.counter = 0});  int counter;  Future incrementCounter() async {    await Future.delayed(Duration(seconds: 2));    counter++;    notifyListeners();  }}
复制代码
ChangeNotifierProvider

获取Provider提供值的方式有两种:
(1)使用Provider.of(context)获取到MyModel对象的引用
(2)使用Consumer小部件得到对MyModel对象的引用
  ChangeNotifierProvider会监听其提供出去的模子对象中的更改。当有值更改后,它将重建下方所有的Consumer和使用Provider.of(context)监听并获取提供值的地方
  1. void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Flutter',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(),    );  }}class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return ChangeNotifierProvider(        create: (_) => MyModel(),        child: Scaffold(            appBar: AppBar(              title: Text("标题"),            ),            body: Center(              child: Column(                mainAxisAlignment: MainAxisAlignment.center,                children: [                  Builder(builder: (context) {                    MyModel model = Provider.of(context);                    return Text("初始数据:${model.counter}");                  }),                  Consumer(                    builder: (context, model, child) {                      return Text(model.counter.toString());                    },                  )                ],              ),            ),            floatingActionButton: Consumer(              builder: (context, model, child) {                return FloatingActionButton(                  onPressed: () {                    model.incrementCounter();                  },                  child: Icon(Icons.add),                );              },            )));  }}
复制代码
这样就实现了点击按钮延迟2秒自增的效果
MultiProvider

上面仅使用了一个Model对象,如果需要提供第二种范例的Model对象,就可以使用MultiProvider
新增MyData类
  1. import 'package:flutter/material.dart';class MyData with ChangeNotifier {  MyData({this.data = ""});  String data;  Future changeValue() async {    await Future.delayed(Duration(seconds: 2));    data += "好";    notifyListeners();  }}
复制代码
修改main.dart,点击FlatButton更改MyData里的值,点击floatingActionButton更改MyModel里的值
  1. void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Flutter',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(),    );  }}class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MultiProvider(        providers: [          ChangeNotifierProvider(create: (_) => MyData()),          ChangeNotifierProvider(create: (_) => MyModel())        ],        child: Scaffold(            appBar: AppBar(              title: Text("标题"),            ),            body: Center(              child: Column(                mainAxisAlignment: MainAxisAlignment.center,                children: [                  Consumer(builder: (context, model, child) {                    return Text("初始数据:${model.data}");                  }),                  Consumer(                    builder: (context, model, child) {                      return Text("MyModel:${model.counter}");                    },                  ),                  Consumer(builder: (context, model, child) {                    return FlatButton(                      onPressed: () => model.changeValue(),                      child: Text("追加值", style: TextStyle(color: Colors.white)),                      color: Colors.red,                    );                  })                ],              ),            ),            floatingActionButton: Consumer(              builder: (context, model, child) {                return FloatingActionButton(                  onPressed: () {                    model.incrementCounter();                  },                  child: Icon(Icons.add),                );              },            )));  }}
复制代码
来源:https://blog.csdn.net/qq_45485851/article/details/112008173
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )