Flutter插件ecko的使用_Ecko是一个基于图结构的状态管理库，适用于Flutter应用程序。

Flutter插件ecko的使用_Ecko是一个基于图结构的状态管理库，适用于Flutter应用程序。

Ecko是一个基于图结构的状态管理库，适用于Flutter应用程序。由于该库仍在积极开发中，因此版本尚未达到v0.1.0。在频繁更新过程中可能会出现破坏性更改，请随时关注进度更新，并通过GitHub Issues提交建议或报告问题。感谢您参与构建这一激动人心的状态管理库！

目录

• 为什么选择Ecko？
• 开始使用
• 核心概念
• 使用指南
  • 创建Store
  • 监听Store更新
  • Store之间的依赖关系
    • 创建依赖关系
    • 创建更新回调
    • 使用自动更新
  • 使用StoreStateWidget
  • Ecko类
• 贡献

为什么选择Ecko？

学习项目

首先，Ecko最初是一个个人学习项目。我想深入了解状态管理系统内部的工作原理，同时提高自己的技能。

启发灵感

在过去的时间里，我主要使用GetX，因为它易于上手。然而，我发现GetX试图一次性完成许多事情，这导致大型项目中的架构崩溃。

然而，有时简单更好——我旨在保持GetX的简洁性，但采用不同的方法来管理状态。

解耦业务逻辑

现有库的一个主要问题是它们倾向于鼓励业务逻辑与用户界面组件紧密耦合。这使得代码更难测试、重构和跨应用不同部分重用。

这就是为什么我在设计ecko时考虑了关注点分离的原则。保持各层之间的松散耦合有助于确保更干净、更易维护的代码库。

使用有向图管理复杂性

Ecko通过有向图结构有效地表示相互依赖的状态。它简化了现代应用中的复杂场景，同时保持清晰的分离和方便的使用。

计划中的功能：开箱即用的服务管理

作为经验丰富的开发者都知道，处理外部依赖如API、数据库或其他服务通常需要额外的注意。虽然仍在开发中，但Ecko的一项计划功能将包括一个集成的服务管理系统。

该功能的想法是提供一种统一的方法来控制应用内的服务，类似于GetX控制器和服务，减少样板代码并确保整个项目的统一设计模式。

开始使用

你可以在pubspec.yaml文件的依赖项部分直接安装Ecko，如下所示：

dependencies:
  ecko: ^0.0.1

你也可以通过执行以下命令在项目中添加Ecko：

flutter pub add ecko

要开始在你的应用中使用Ecko，请确保初始化Ecko单例类，如下所示：

void main() {
  // 在应用启动时初始化Ecko
  Ecko.init(printLogs: true);
  // 访问Ecko实例
  final ecko = Ecko();
  // 使用ecko来管理控制器、存储等
  // ...
}

现在你可以开始使用Ecko了！

核心概念

Ecko的核心是Store，这些类封装并管理状态。你可以在应用中合适的地方创建Store，但请注意，当不再需要相关状态时，你需要手动调用其dispose()方法以避免内存泄漏。

Store可以通过Ecko内部维护的有向无环图(DAG)相互依赖。这意味着如果你更改某个Store的值，任何依赖于它的其他Store都会自动更新。

Ecko使用ValueNotifier和ChangeNotifier来启用响应式功能，使组件仅在必要时高效重建。要监听特定Store的更新，可以使用StoreBuilder小部件。或者，你可以扩展StoreStateWidget抽象基类，轻松构建订阅到单个Store的小部件，而无需担心手动订阅或清理。

使用指南

创建Store

Ecko的基本构建块是Store。最简单的形式，一个Store只是包装你的应用状态的一个Store实例。例如，假设你想维护一个计数器变量：

// 用于保存计数器状态的Store
final counter = Store(0);

根据你的应用架构，在合适的地方创建Store。但请记住，在关联状态变得过时后，显式调用它们的dispose()方法以防止潜在的内存泄漏：

[@override](/user/override)
void dispose() {
  // 处理counter Store的清理
  counter.dispose();

  // 执行其他必要的清理操作
  // ...
}

监听Store更新

使用StoreBuilder小部件来监听特定Store的更新，以便更新应用程序UI。

它接受两个命名参数——store指定目标Store，widget定义负责渲染当前Store值的回调。在以下示例中，我们在一个Text小部件内显示counter Store的更新值：

Column(
  children: [
    // 一个监听counter Store的小部件
    StoreBuilder<int>(
      store: counter,
      builder: (context, value) {
        return Text(value.toString());
      },
    ),

    // 更多小部件...
  ],
)

注意：确保清理Store监听器及其相应的UI元素。忽略此任务可能导致由于遗留监听器引起的不良副作用。

为了方便起见，可以考虑实现StoreStateWidget接口，它会在后台处理自动订阅。请参阅API引用了解更多详情。

Store之间的依赖关系

Ecko的Store可以通过内部使用的有向图相互依赖。

创建依赖关系

在两个Store之间引入依赖节点可以帮助自动更新依赖Store的状态，当它所依赖的Store被更新时。

例如，我们有一个StoreA持有当前温度（摄氏度），另一个StoreB持有当前温度（华氏度）。

如果我们将StoreB作为StoreA的依赖项，那么当StoreA被更新时，StoreB会自动更新。

新的StoreB状态由其updateCallback计算得出。你将在文档后面的部分学到更多关于它的内容。还可以参阅此处。

创建依赖关系非常简单：

// 持有摄氏度温度值的Store
final celsiusStore = Store<double>(0);

// 持有华氏度温度值的Store
final fahrenheitStore = Store<double>(0);

现在，如果我们想要在celsiusStore和fahrenheitStore之间创建依赖关系，意味着当celsiusStore的状态更新时，fahrenheitStore应该自动更新，我们可以将celsiusStore的依赖项添加如下：

// [fahrenheitStore] 现在依赖于 [celsiusStore]
celsiusStore.addDependency(fahrenheitStore);

警告：如果storeA依赖于storeB，则storeB不能依赖于storeA。这会导致状态更新的无限循环，并最终抛出“堆栈溢出”错误。

创建更新回调

每个Store都有一个updateCallback属性，这是一个函数，当Store自动更新时会被调用。例如，当celsius Store更新时，fahrenheit Store的updateCallback会被调用来更新其状态，因为它是celsius Store的依赖项。

你可以在创建Store时设置updateCallback：

// 持有摄氏度温度值的Store
// 当这个Store自动更新时，状态将增加1
final fahrenheitStore = Store<double>(0, updateCallback: (val) => val + 1);

对于每个Store，updateCallback是可变的，因此你可以在任何时候更改它：

// 这为Store设置了新的updateCallback，当Store自动更新时会被调用
fahrenheitStore.setUpdateCallback((value) {
  return (celsiusStore.state * 9 / 5) + 32;
});

使用自动更新

每个Store都提供了autoUpdate函数，当更新其依赖项的状态时，该函数会在内部调用。

你可以调用autoUpdate来根据updateCallback更新Store的状态：

// 一个持有计数器状态的Store，其updateCallback用于将状态递增1
final counter = Store<int>(0, updateCallback: (val) => val++);

// 根据updateCallback更新Store的状态
counter.autoUpdate();

使用StoreStateWidget

另外，你可以扩展StoreStateWidget抽象基类，轻松构建订阅到单个Store的状态无关小部件，无需担心手动订阅或清理。

///
/// 这是一个Slider Widget，它有自己的Store，
///
/// 此类内部管理Slider的状态，
/// 你不需要担心创建和清理Store
///
/// 此小部件提供了另一种处理Store的方式，
/// 只能在Store完全隔离于其他Store时使用
///
class SliderWidget extends StoreStateWidget<double> {
  // 通过super传递默认值0来初始化Store
  SliderWidget({Key? key}) : super(state: 0, key: key);

  [@override](/user/override)
  Widget build(BuildContext context, double state) {
    return Slider(
      min: 0,
      max: 100,
      value: state,
      onChanged: (val) => store.set(val),
    );
  }
}

这个小部件提供了另一种处理Store的方式，但只能在Store完全隔离于其他Store时使用。

Ecko类

Ecko类用于在Ecko库中将所有内容组合在一起。目前，它主要用于初始化Ecko的基础服务。

如前所述，未来更新中，Ecko将用于管理服务和控制器，提供开箱即用的服务定位器。

贡献

欢迎贡献！如果您想改进Ecko，请在此仓库上打开一个问题或PR提交您的建议更改。祝编码愉快 🕸️！

示例代码

以下是main.dart的完整示例代码：

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

void main() {
  // 在调试模式下启用日志记录
  Ecko.init(printLogs: kDebugMode);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Ecko Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        useMaterial3: true,
      ),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  [@override](/user/override)
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  // 实例化一个新的包含整数值初始化为0的Store
  final counter = Store(0);

  [@override](/user/override)
  void dispose() {
    // 清理Store
    counter.dispose();

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter w/ Ecko 🕸️"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 基于当前counter Store的值构建UI
            StoreBuilder<int>(
              // 传递counter Store实例
              store: counter,
              // 渲染Store值的文本表示
              widget: (context, value) {
                return Text(value.toString());
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 增加按钮
          FloatingActionButton(
            // 按钮图标
            child: const Icon(Icons.add_rounded),
            // 点击事件处理器
            onPressed: () {
              setState(() {
                // 增加存储的值
                counter.update((value) => value + 1);
              });
            },
          ),
          const SizedBox(height: 10),
          // 减少按钮
          FloatingActionButton(
            // 按钮图标
            child: const Icon(Icons.remove_rounded),
            // 点击事件处理器
            onPressed: () {
              setState(() {
                // 减少存储的值
                counter.update((value) => value - 1);
              });
            },
          ),
          const SizedBox(height: 10),
          // 重置按钮
          FloatingActionButton(
            // 按钮图标
            child: const Icon(Icons.restore_rounded),
            // 点击事件处理器
            onPressed: () {
              setState(() {
                // 将存储的值重置为其初始值
                counter.set(0);
              });
            },
          ),
        ],
      ),
    );
  }
}