综合技术

Flutter 状态管理之 ChangeNotifierProvider(Provider)

微信扫一扫,分享到朋友圈

Flutter 状态管理之 ChangeNotifierProvider(Provider)
0

Provider 是 Google I/O 2019 大会上宣布的现在官方推荐的状态管理方式,而 ChangeNotifierProvider 可以说是 Provider 的一种。

Provider GitHub 地址: github.com/rrousselGit…

再贴一个油管上的视频: www.youtube.com/watch?v=xcS…

OK,那废话不多说。下面具体看看如何使用 ChangeNotifierProvider 做状态管理。

通过一个 demo 来展示 ChangeNotifierProvider 的使用。该 demo 实现的功能很简单,计数 + 切换主题。仅有两个页面,两个页面共享相同的数据。

效果图:


我已经将这个小 demo 上传至 GitHub: github.com/MzoneCL/flu…

第一步: 添加依赖

在 pubspec.yaml 文件中添加依赖。


provider 包 pub 地址:pub.dev/packages/pr…

第二步:创建共享数据类

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class DataInfo with ChangeNotifier {
  int _count = 0;
  ThemeData _themeData = ThemeData.light();

  get count => _count;
  get themeData => _themeData;

  addCount() {
    _count++;
    notifyListeners();
  }
  subCount() {
    _count--;
    notifyListeners();
  }
  changeTheme() {
    if (_themeData == ThemeData.light()) {
      _themeData = ThemeData.dark();
    } else {
      _themeData = ThemeData.light();
    }
    notifyListeners();
  }
}
复制代码

数据类需要 with ChangeNotifier 以使用 notifyListeners() 函数通知监听者以更新界面。

第三步:获取数据

Provider 获取数据状态有两种方式:

  1. 使用 Provider.of(context) 获取 DataInfo
  2. 使用 Consumer

不过这两种方式都需要在顶层套上ChangeNotifierProvider():


1. 使用 Provider.of(context) 获取 DataInfo

例如,指定主题部分的代码如下:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataInfo = Provider.of<DataInfo>(context);
    return MaterialApp(
      home: MyHomePage(),
      theme: dataInfo.themeData,
    );
  }
}
复制代码

通过Provider.of<DataInfo>(context) 获取 DataInfo 实例,需要在 of 函数后指明具体的数据类。然后就可以直接通过 getter 访问到 themeData 了。

2.使用 Consumer

同样,以指定主题部分代码为例:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<DataInfo>(
      builder: (context, dataInfo, _) => MaterialApp(
            home: MyHomePage(),
            theme: dataInfo.themeData,
          ),
    );
  }
}
复制代码

直接用 Consumer 包住需要使用共享数据的 Widget,同样的,Consumer 也要指明类型。

OK,以上就是 ChangeNotifierProvider 的基本使用了。

阅读原文...


微信扫一扫,分享到朋友圈

Flutter 状态管理之 ChangeNotifierProvider(Provider)
0

稀土掘金

Relative arrangement in the form of a circle

上一篇

基于Travis CI实现 Gitbook在 Github 和 Coding 的同步部署

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Flutter 状态管理之 ChangeNotifierProvider(Provider)

长按储存图像,分享给朋友