剖析 scoped-model 源码，解锁 Flutter 状态管理奥秘

见解分享

2023-09-15 02:22:36

揭秘 Flutter 中 scoped_model 状态管理的运作机制

什么是状态管理？

在 Flutter 应用开发中，状态管理至关重要，它定义了数据的组织、访问和修改方式。状态数据是应用中随时间而变化的信息，例如用户输入、网络请求结果或当前选定的语言。

scoped_model 的优势

Google 推荐使用的状态管理库是 scoped_model。它以轻量、高效和简单易用而著称，非常适合小型到中型的 Flutter 应用。

scoped-model 的架构

scoped-model 使用 InheritedWidget 机制实现状态共享。它围绕以下关键组件构建：

Model： 存储和管理状态数据的类。
ScopeModel： 作为 InheritedWidget，负责共享状态数据。
ModelConsumer： 消费状态数据的 InheritedWidget。

深入源码分析

Model 类：

Model 类包含以下关键方法：

notifyListeners： 通知所有监听者状态数据已更新。
dispose： 释放不再需要的资源。

ScopeModel 类：

ScopeModel 类是 InheritedWidget 的一个子类，它具有：

model： Model 实例，存储状态数据。
child： 要共享状态数据的子 Widget。

ModelConsumer 类：

ModelConsumer 类是一个 StatelessWidget，它提供：

builder： 一个回调函数，基于状态数据构建 Widget。

使用 scoped_model

使用 scoped_model 很简单：

创建一个 Model 实例。
将 Model 实例传递给 ScopeModel。
使用 ScopeModel 包裹需要访问状态数据的子 Widget。
使用 ModelConsumer 消费状态数据。

代码示例：

// Model 类
class MyModel extends Model {
  int count = 0;

  void incrementCount() {
    count++;
    notifyListeners();
  }
}

// 使用 scoped_model
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopeModel(
      model: MyModel(),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

// 消费状态数据
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final model = ScopeModel.of<MyModel>(context);
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text("Count: ${model.count}"),
            ElevatedButton(
              onPressed: () => model.incrementCount(),
              child: Text("Increment"),
            ),
          ],
        ),
      ),
    );
  }
}