当前位置: 开发笔记 > 编程语言 > 正文

Flutter系列十：Flutter状态管理之Provider的使用和架构分析

作者：艹尛鱈_695 | 来源：互联网 | 2023-07-31 09:53

状态管理在Flutter中非常重要，但是它包含的内容又非常的广泛。本文我们首先了解下什么是状态和

状态管理在Flutter中非常重要，但是它包含的内容又非常的广泛。

本文我们首先了解下什么是状态和状态管理呢？然后我们来了解官方的状态管理库Provider的使用，最后分析下Provider背后的秘密。

Provider

状态管理

状态

Flutter是声明式编程，Widget定义的UI都是在build()函数中实现的，这个函数的功能就是将状态转换成UI。

UI = f(state)

官方对状态的定义如下：

whatever data you need in order to rebuild your UI at any moment in time

翻译过来就是：状态就是任何时间任何场景下重构UI所需要的数据。

这里面至少可以看到两层含义：

状态就是数据；

状态的改变驱动了UI的改变。

状态的分类

我们可以把状态分为局部状态和全局状态。

局部状态就是Widget中内部持有的状态，典型代表就是StatefuleWidget和它对应的State。局部状态只会影响单个Widget的UI呈现。

当某个状态需要在多个Widget使用，或者在整个APP中使用，那它就是全局状态了。全局状态的典型代表就是InheritedWidget。

我们在InheritedWidget的使用和源码分析这篇文章中已经详细介绍过了InheritedWidget的相关内容，当然我们也提到过它的一些不是太完善的地方。

状态管理库

我们这里所说的状态管理库主要是指对全局状态的一些处理库，除了InheritedWidget外，还有一些最近非常流行的库：

flutter_bloc

它目前是评分最高的库，适合大型的项目。但是它有一个缺点就是理解起来比较困难，编写代码方式也很独特，需要编写一些重复的代码模板。

Provider

它是Flutter官方团队共同维护的一个项目，由于有官方背景，所以不用担心后期的维护升级问题。

getx

getx是目前上升趋势最快的一个库，使用非常简单，代码也很简介，功能很多。

当然还有其他一些库，譬如mobx,flutter_redux等，当然你很大可能也不会用到。

我们将会对Provider和getx这两个库的使用和源码进行介绍。

Provider的使用

和介绍InheritedWidget时使用的案例类似，本文讲解Provider的时候使用是一个简单的计数器案例：有一个number的全局状态，有三个Widget会使用到它，点击FloatingActionButton可以将number的值加1。效果如下：

Demo

当然复杂的多界面逻辑的实现方法使用的方法是一样的。譬如实现下面的功能：

官方的示例

基本使用

使用前得先引入库：

dependencies:
  provider: ^5.0.0

接下来我们分三步来了解它的使用：

将number封装到ChangeNotifier中，创建需要共享的状态

class NumberModel extends ChangeNotifier {
  int _number = 0;

  int get number => _number;

  set number(int value) {
    _number = value;
    notifyListeners();
  }
}

ChangeNotifier是Flutter Framework的基础类，不是Provider库中的类。ChangeNotifier继承自Listenable,也就是ChangeNotifier可以通知观察者值的改变(实现了观察者模式)。

NumberModel有一个_number状态，然后提供了获取的方法get和设置set的方法。

在应用程序的顶层添加ChangeNotifierProvider

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (ctx) => NumberModel(),
      child: MyApp(),
    ),
  );
}

将应用的顶层设置为ChangeNotifierProvider, 然后将MyApp()变为它的子Widget。

ChangeNotifierProvider的create函数需要返回ChangeNotifier。

其它Widget使用共享的状态

有四个地方需要使用到共享的状态，三个显示文字的Text Widget和FloatingActionButton。

Provider.of

class NumberWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取NumberModel的number
    int number = Provider.of(context).number;
    return Container(
      child: Text(
        "点击次数: $number",
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

我们将Text Widget封装成了NumberWidget1, 通过int number = Provider.of(context).number;获取到NumberModel的number值，然后就可以显示了。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1 获取NumberModel
    NumberModel model = Provider.of(context);

    return Scaffold(
        appBar: AppBar(
          title: Text("Provider"),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [NumberWidget1(), NumberWidget1(), NumberWidget1()]),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 2 修改number值
            model.number++;
          },
          child: Icon(Icons.add),
        ));
  }
}

FloatingActionButton也需要通过Provider.of(context)方法先拿到NumberModel，然后调用set方法改变number的值。

全部代码:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (ctx) => NumberModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    NumberModel model = Provider.of(context);

    return Scaffold(
        appBar: AppBar(
          title: Text("Provider"),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [NumberWidget1(), NumberWidget1(), NumberWidget1()]),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            model.number++;
          },
          child: Icon(Icons.add),
        ));
  }
}

class NumberWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int number = Provider.of(context).number;
    return Container(
      child: Text(
        "点击次数: $number",
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

class NumberModel extends ChangeNotifier {
  int _number = 0;

  int get number => _number;

  set number(int value) {
    _number = value;
    notifyListeners();
  }
}

Consumer

问题：Provider.of有一个问题，就是当状态值发生变化后，Provider.of所在的Widget整个build方法都会重新构建。

上面的例子中，FloatingActionButton会引起Scaffold的重构，所以对性能的影响是最大的。

Consumer(
    builder: (context, value, child) {
        return FloatingActionButton(
            onPressed: () {
                value.number++;
            },
        child: Icon(Icons.add),
        );
    },
)

我们将FloatingActionButton用Consumer包裹，builder中的value参数就是我们需要的NumberModel了。

这里我们可以进一步优化一下，对child进行复用。

Consumer(
    builder: (context, value, child) {
        return FloatingActionButton(
            onPressed: () {
                value.number++;
            },
            child: child,
        );
        },
    child: Icon(Icons.add),
));

我们将child传入Consumer的构造函数就能实现复用了。

child复用的逻辑我们在前一篇关于动画源码的文章中有解释，如果需要可以回头参阅。

差异部分的代码如下：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Provider"),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [NumberWidget1(), NumberWidget1(), NumberWidget1()]),
        ),
        floatingActionButton: Consumer(
          builder: (context, value, child) {
            return FloatingActionButton(
              onPressed: () {
                value.number++;
              },
              child: child,
            );
          },
          child: Icon(Icons.add),
        ));
  }
}

Consumer

问题：Consumer总归还是需要重构的，其实我们使用FloatingActionButton的时候只是用到了NumberModel的设置方法，根本没有用到它的_number属性，所以即使_number改变了，我们也是可以不需要重构的。

如果不需要重构，我们可以使用Selector：

Selector(
    selector: (ctx, numberModel) => numberModel,
    shouldRebuild: (previous, next) => false,
    builder: (context, value, child) {
        return FloatingActionButton(
            onPressed: () {
                value.number++;
            },
        child: child,
        );
    },
    child: Icon(Icons.add),
)

代码解释：

Selector的泛型中有两个参数类型，第一个是原始类型，第二个是转换后的类型，也就是说Selector多了一个对数据进行转换的功能；
selector是进行数据类型转换的函数；
shouldRebuild是确实是否需要重构，我们明显是不需要的，所以传false;
builder和Consumer的功能就是类似的了。

差异部分的代码如下：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Provider"),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [NumberWidget1(), NumberWidget1(), NumberWidget1()]),
        ),
        floatingActionButton: Selector(
          selector: (ctx, numberModel) => numberModel,
          shouldRebuild: (previous, next) => false,
          builder: (context, value, child) {
            return FloatingActionButton(
              onPressed: () {
                value.number++;
              },
              child: child,
            );
          },
          child: Icon(Icons.add),
        ));
  }
}

多个状态的使用

有时候某个Widget可能需要使用多个状态，我们接下来就介绍这种情况的使用方法。

创建多个需要共享的状态

class RandomNumberModel extends ChangeNotifier {
  int _randomNumber = Random().nextInt(100);

  int get randomNumber => _randomNumber;

  void resetRandomNumber() {
    _randomNumber = Random().nextInt(100);
    notifyListeners();
  }
}

我们再创建一个RandomNumberModel，里面有一个随机的数值_randomNumber, 并且设置获取方法get和设置方法resetRandomNumber。

将应用程序的顶层改为MultiProvider

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (ctx) => NumberModel(),
        ),
        ChangeNotifierProvider(
          create: (ctx) => RandomNumberModel(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

MultiProvider的providers放置的是共享的多个Provider。

其它Widget使用共享的状态

Provider.of

class NumberWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 读取
    int number = Provider.of(context).number;
    // 读取
    int randomNumber = Provider.of(context).randomNumber;
    return Container(
      // 使用
      child: Text(
        "点击次数: $number 随机数: $randomNumber",
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

我们可以通过Provider.of分别取到NumberModel和RandomNumberModel，然后读取到相应的值。

Consumer2

class NumberWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Consumer2(
        builder: (context, value, value2, child) {
          return Text("点击次数: ${value.number}  随机数: ${value2.randomNumber}",
              style: TextStyle(fontSize: 30));
        },
      ),
    );
  }
}

Consumer2中两个泛型代表使用的哪两个数据，build方法中的value就是NumberModel,value2就是RandomNumberModel，然后读取到相应的值。

Selector2

class NumberWidget3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Selector2>(
        selector: (ctx, value1, value2) => Tuple2(value1.number, value2.randomNumber),
        builder: (context, value, child) {
          return Text("点击次数: ${value.item1}  随机数: ${value.item2}",
              style: TextStyle(fontSize: 30));
        },
        shouldRebuild: (previous, next) => previous != next,
      )
    );
  }
}

Selector2有三个泛型参数：NumberModel和RandomNumberModel代表使用的两个数据类型，第三个参数表示由前两个数据转换成的新的数据类型，我们需要使用两个int值。

使用Tuple2需要引入三方库 tuple: ^2.0.0。使用它的优点是它内置了==比较操作符，不需要我们去自己比较元素是否相等了。

selector的三个参数为：BuildContext，NumberModel和RandomNumberModel, 返回值就是转换后的数据。

builder方法中就可以直接使用value.item1和value.item2了。

shouldRebuild方法的previous和next的类型是Tuple2，可以直接比较。如果相同就不重构了。

多个状态使用的补充

Consumer2还有几个好兄弟：，Consumer3，Consumer4，Consumer5，Consumer6。

Selector2也有几个好兄弟：，Selector3，Selector4，Selector5，Selector6。

通过名字可以知道，他们分别可以组合对应的多个数据。

全部代码:

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (ctx) => NumberModel(),
        ),
        ChangeNotifierProvider(
          create: (ctx) => RandomNumberModel(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider"),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [NumberWidget1(), NumberWidget2(), NumberWidget3()]),
      ),
      floatingActionButton: Consumer2(
        child: Icon(Icons.add),
        builder: (context, value, value2, child) {
          return FloatingActionButton(
            onPressed: () {
              value.number++;
              value2.resetRandomNumber();
            },
            child: child,
          );
        },
      ),
    );
  }
}

class NumberWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int number = Provider.of(context).number;
    int randomNumber = Provider.of(context).randomNumber;
    return Container(
      child: Text(
        "点击次数: $number 随机数: $randomNumber",
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

class NumberWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Consumer2(
        builder: (context, value, value2, child) {
          return Text("点击次数: ${value.number}  随机数: ${value2.randomNumber}",
              style: TextStyle(fontSize: 30));
        },
      ),
    );
  }
}

class NumberWidget3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Selector2>(
        selector: (ctx, value1, value2) => Tuple2(value1.number, value2.randomNumber),
        builder: (context, value, child) {
          return Text("点击次数: ${value.item1}  随机数: ${value.item2}",
              style: TextStyle(fontSize: 30));
        },
        shouldRebuild: (previous, next) => previous != next,
      )
    );
  }
}

class NumberModel extends ChangeNotifier {
  int _number = 0;

  int get number => _number;

  set number(int value) {
    _number = value;
    notifyListeners();
  }
}

class RandomNumberModel extends ChangeNotifier {
  int _randomNumber = Random().nextInt(100);

  int get randomNumber => _randomNumber;

  void resetRandomNumber() {
    _randomNumber = Random().nextInt(100);
    notifyListeners();
  }
}

Provider源码解析

Provider的基本架构如下：

Provider架构

所有的Provider都继承自InheritedProvider；
InheritedProvider持有一个_CreateInheritedProvider对象_delegate, _delegate持有_ValueInheritedProviderState对象,_ValueInheritedProviderState对象通过createState()方法调用了InheritedProvider的 create()方法生成了_value，_value也就是开发者提供的可监测对象ChangeNotifier;

create()只有在需要使用_value时候才会调用，并不是InheritedProvider插入Widget Tree时候就调用，属于懒加载的实现。

InheritedProvider有一个InheritedWidget的子Widget _InheritedProviderScope。_InheritedProviderScope持有上面提到的_value的值；

也就是说Provider依赖于InheritedWidget，找到对应的InheritedWidget就能获取对应的_value的值。

Widget重构的时候如果调用Provider.of方法，会找到_value的值并且监听它的变化。

Provider的局部刷新逻辑如下：

Provider的局部刷新

_value值发生变化，会通知监听者刷新。其中会调用_InheritedProviderScope的markNeedsNotifyDependents方法，调用依赖Widget的didChangeDependencies, 这两个方法都会调用markNeedsBuild(),进行重构；
Widget重构的时候会调用Provider.of方法，更新对_value的监听，为下次重构做准备。

Consumer和Selector的优化逻辑：

Consumer

Consumer和Selector只是封装了一层SingleChildStatefulWidget，重构的范围限定在Consumer和Selector内部，内部调用的还是Provider.of方法。

MultiProvider的逻辑：

多个Provider

MultiProvider就是嵌套了多个Provider，其他和单个Provider没有什么差别。

总结

其实Provider库还提供了其他的几个Provider，ListenableProvider,ValueListenableProvider,StreamProvider和FutureProvider，它们都是我们开发中的可选项。

至此，我们将Provider库的使用方式和底层的逻辑解释完了。

推荐阅读

window
如何更有效地提升对支持部门的协助与支撑？ - Enhancing Support for the Support Department: Strategies and Best Practices

尽管我们尽最大努力，任何软件开发过程中都难免会出现缺陷。为了更有效地提升对支持部门的协助与支撑，本文探讨了多种策略和最佳实践，旨在通过改进沟通、增强培训和支持流程来减少这些缺陷的影响，并提高整体服务质量和客户满意度。 ... [详细]

蜡笔小新 2024-11-07 06:55:33
post
在范围[0..n-1]中产生m个不同的随机数 - Generating m distinct random numbers in the range [0..n-1]

Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]

蜡笔小新 2024-11-13 09:49:14
post
应用链时代，详解 Avalanche 与 Cosmos 的差异

应用链时代，详解 Avalanche 与 Cosmos 的差异 ... [详细]

蜡笔小新 2024-11-13 09:37:19
post
杜甫《喜晴》的两种英译比较

本文对比了杜甫《喜晴》的两种英文翻译版本：a. Pleased with Sunny Weather 和 b. Rejoicing in Clearing Weather。a 版由 alexcwlin 翻译并经 Adam Lam 编辑，b 版则由哈佛大学的宇文所安教授 (Prof. Stephen Owen) 翻译。 ... [详细]

蜡笔小新 2024-11-12 15:02:28
select
深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例

深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]

蜡笔小新 2024-11-07 20:50:46
require
使用JavaScript生成Java兼容的UUID代码实现与优化技巧

本文介绍了UUID（通用唯一标识符）的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符，广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID，并提供了多种优化方法，以提高生成效率和兼容性。 ... [详细]

蜡笔小新 2024-11-05 18:19:54
require
Java 并发编程：深入解析 AtomicInteger 和 CAS 无锁算法

在多线程并发环境中，普通变量的操作往往是线程不安全的。本文通过一个简单的例子，展示了如何使用 AtomicInteger 类及其核心的 CAS 无锁算法来保证线程安全。 ... [详细]

蜡笔小新 2024-11-12 16:40:04
instance
实验九：使用SharedPreferences存储简单数据

本实验旨在帮助学生理解和掌握使用SharedPreferences存储和读取简单数据的方法，包括程序参数和用户选项。 ... [详细]

蜡笔小新 2024-11-12 14:21:47
chat
OpenAI首席执行官Sam Altman展望：人工智能的未来发展方向与挑战

OpenAI首席执行官Sam Altman展望：人工智能的未来发展方向与挑战 ... [详细]

蜡笔小新 2024-11-11 09:47:50
instance
ESP8266 01S Web 服务器成功启动：详细解决方案与实践指南

本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明，帮助读者快速掌握该模块的使用方法。在疫情期间，作者重新审视并研究了这一未被充分利用的模块，最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现，还涵盖了调试过程中遇到的常见问题及其解决方法，为初学者提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-08 19:12:49
post
QT框架中事件循环机制及事件分发类详解

在QT框架中，QCoreApplication类作为事件循环的核心组件，为应用程序提供了基础的事件处理机制。该类继承自QObject，负责管理和调度各种事件，确保程序能够响应用户操作和其他系统事件。通过事件循环，QCoreApplication实现了高效的事件分发和处理，使得应用程序能够保持流畅的运行状态。此外，QCoreApplication还提供了多种方法和信号槽机制，方便开发者进行事件的定制和扩展。 ... [详细]

蜡笔小新 2024-11-08 17:43:20
post
【USACO12JAN】视频游戏中连击技巧的分析与应用

在这款视频游戏中，Bessie 需要操作三个按钮 A、B 和 C 来完成各种任务。通过对这些按钮的组合使用，玩家可以触发连击技巧，从而获得更高的分数。本文详细分析了这些连击技巧的实现方法及其在游戏中的应用，为玩家提供了有效的策略建议。 ... [详细]

蜡笔小新 2024-11-08 12:20:27
instance
ButterKnife的基础应用与实践指南

ButterKnife 是一款用于 Android 开发的注解库，主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法，包括如何通过注解实现字段和方法的绑定，以及在实际项目中的应用示例。此外，文章还提到了截至 2016 年 4 月 29 日，ButterKnife 的最新版本为 8.0.1，为开发者提供了最新的功能和性能优化。 ... [详细]

蜡笔小新 2024-11-07 13:17:24
timestamp
微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]

蜡笔小新 2024-11-07 09:43:24
instance
尝试对从复杂 XSD 生成的类进行序列化时出现 NullReferenceException 错误

在尝试对从复杂 XSD 生成的类进行序列化时，遇到了 `NullReferenceException` 错误。尽管已经花费了数小时进行调试和搜索相关资料，但仍然无法找到问题的根源。希望社区能够提供一些指导和建议，帮助解决这一难题。 ... [详细]

蜡笔小新 2024-11-02 17:25:38

艹尛鱈_695

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章