文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter状态管理Provider的使用示例详解

2022-11-13 19:08

关注

前言

Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变。

InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结。

计数器

还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(state)、逻辑处理层(provider)、UI层(view)。

首先创建文件夹:

数据层: 用来保存数据,基本和bloc一样。

/// 数据层
class PNumState {
  int num;
  // 初始化
  PNumState({this.num = 0});
  PNumState clone() {
    // 获取最新对象
    return PNumState()..num = num;
  }
}

业务逻辑层 ChangeNotifier: 用来处理页面的逻辑,和bloc相比较代码较为简洁,ChangeNotifier继承自Listenable,Listenable是一个维护监听者列表的对象,通过它我们可以调用notifyListeners();方法发送通知监听者实现页面状态的更新。

/// 业务逻辑层
class PNumProvider extends ChangeNotifier {
 /// 初始化数据对象
  final state = PNumState(num: 0);
  /// 自增计数方法
  add() {
    state.num++;
    notifyListeners();
  }
}

UI层: 根结点返回ChangeNotifierProvider,通过它可以让provider实例和页面所有子节点进行绑定,实现create方法和builder方法分别返回provider和我们的页面Widget。 对于需要更新的组件使用Consumer<P>包裹,当范型里的实例调用notifyListeners的时候, builder返回的Widget将得到通知,从而达到数据的更新。

/// UI层
class PNumPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // 通过ChangeNotifierProvider将UI层和逻辑层进行绑定
    return ChangeNotifierProvider(
      create: (BuildContext context) => PNumProvider(),
      builder: (context, child) => _buildPage(context),
    );
  }
  Widget _buildPage(BuildContext context) {
  // 获取provider示例
    final provider = context.read<PNumProvider>();
    return Stack(
      children: [
        Consumer<PNumProvider>(
          builder: (context, provider, child) {
          // builder方法回返回provider实例,和上面获取的实例一样
            return Center(child: Text("点击了${provider.state.num}次"));
          },
        ),
        Positioned(
          child: FloatingActionButton(
            onPressed: () {
            // 调用自增方法
              provider.add();
            },
            child: Icon(Icons.add),
          ),
          bottom: 20,
          right: 20,
        )
      ],
    );
  }
}

效果:

当然上方的代码也可以通过小呆呆的插件自动生成。

全局状态

provider全局状态使用也非常的方便,我们刚才的逻辑层需要在顶层runApp方法里进行初始化provider,使用MultiProvider可以同时管理多个全局状态。

//全部状态管理
class Status {
  // 全局初始化
  static Widget init(Widget child) {
    //使用 MultiProvider 设置多个Provider 状态
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
        // 全局管理app主题
            create: (_) => AppTheme(AppTheme.getDefaultTheme())),
      ],
      child: child,
    );
  }
}
// 在 runApp方法之前初始化
runApp(Status.init(MyApp()));

在接收的地方还是一样使用Consumer包裹组件,代码略...

总结

provider相较于bloc没有强制的分层,即使是数据也是我们自己分出来的,不分出来直接写在逻辑层也是可以的,所以provider的使用感觉更加的灵活一些。对于不同项目我们可以使用不同的框架,开发人多建议bloc强制代码分层,如果人少就provider

以上就是Flutter状态管理Provider的使用示例详解的详细内容,更多关于Flutter状态管理Provider的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯