Flutter数据模型管理插件model_mate的使用

ModelMate 是一个轻量级且易于使用的状态管理库，专为 Flutter 应用程序设计。它提供了一种简单直观的方式来管理响应式模型和可观察属性，从而帮助开发者更轻松地构建响应迅速且易于维护的应用程序。

目录

• 介绍
• 特性
• 开始使用
  • 安装
  • 导入
• 使用方法
  • ReactiveModel
  • ModelMateProvider
  • ModelMateConsumer
  • ObservableProperty
  • ModelState
• 示例
• 贡献
• 行为准则
• 如何贡献
• 许可证
• 致谢

开始使用

安装

在 pubspec.yaml 文件中添加 model_mate：

dependencies:
  flutter:
    sdk: flutter
  model_mate: ^0.0.1

然后运行以下命令以获取依赖项：

flutter pub get

导入

在 Dart 文件中导入 model_mate：

import 'package:model_mate/model_mate.dart';

使用方法

ReactiveModel

创建一个继承自 ReactiveModel 的类，并定义你的可观察属性：

import 'package:model_mate/model_mate.dart';

class CounterModel extends ReactiveModel {
  CounterModel(int initialCount) {
    count = observable(initialCount);
  }

  late final ObservableProperty<int> count;

  void increment() {
    count.value += 1; // 增加计数器值
  }

  void decrement() {
    count.value -= 1; // 减少计数器值
  }
}

ModelMateProvider

将应用程序包装在 ModelMateProvider 中，以便在整个 widget 树中可用：

void main() {
  runApp(
    ModelMateProvider(
      models: [
        CounterModel(0), // 初始化计数器模型
        // 可以在这里添加其他模型
      ],
      child: const MainApp(), // 主应用
    ),
  );
}

ModelMateConsumer

在 widget 树中使用 ModelMateConsumer 来访问模型：

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ModelMateConsumer<CounterModel>(
      builder: (context, counterModel) {
        return Scaffold(
          appBar: AppBar(title: const Text('计数器')),
          body: Center(
            child: Text('计数: ${counterModel.count.value}'), // 显示计数值
          ),
          floatingActionButton: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FloatingActionButton(
                onPressed: counterModel.increment, // 点击增加计数
                child: const Icon(Icons.add),
              ),
              const SizedBox(height: 10),
              FloatingActionButton(
                onPressed: counterModel.decrement, // 点击减少计数
                child: const Icon(Icons.remove),
              ),
            ],
          ),
        );
      },
    );
  }
}

ObservableProperty

ObservableProperty 是一个用于管理可观察属性的类。例如：

class MyModel extends ReactiveModel {
  MyModel() {
    name = observable('初始名称'); // 初始化可观察字符串
  }

  late final ObservableProperty<String> name;

  void updateName(String newName) {
    name.value = newName; // 更新名称
  }
}

ModelState

ModelMate 提供了内置支持来处理模型的不同状态：

• LoadingState: 表示模型正在加载数据。
• DataState: 表示模型已成功加载数据。
• ErrorState: 表示加载数据时发生错误。

你可以通过以下方式更新模型的状态：

class MyModel extends ReactiveModel {
  Future<void> fetchData() async {
    setLoading(); // 设置状态为 LoadingState
    try {
      // 执行数据获取操作
      setLoading(val: false); // 设置状态为 DataState
    } catch (error) {
      setError(error); // 设置状态为 ErrorState
    }
  }
}

在 UI 中处理不同的状态：

ModelMateConsumer<MyModel>(
  builder: (context, model) {
    switch (model.state) {
      case LoadingState():
        return CircularProgressIndicator(); // 加载动画
      case ErrorState(error: var error):
        return Text('错误: $error'); // 显示错误信息
      case DataState():
        return Text('数据已加载'); // 数据加载完成
      default:
        return Container(); // 默认情况
    }
  },
);

示例

查看 example 目录下的完整示例应用程序，演示如何使用 ModelMate。

运行示例：

cd example
flutter run

贡献

我们欢迎社区的贡献！请在贡献之前阅读以下指南。

行为准则

我们希望所有贡献者遵守我们的行为准则。请阅读该准则以了解我们期望的行为标准。

如何贡献

1. 克隆仓库：

   • 点击右上角的 “Fork” 按钮以克隆仓库。
   • 运行以下命令克隆你的 fork：

     git clone https://github.com/yourusername/model_mate.git
     

2. 创建分支：

   git checkout -b feature/your-feature-name
   

3. 实现功能或修复问题：

   • 编写代码并测试你的更改。

4. 编写测试：

   • 确保你的更改有充分的测试覆盖。

5. 运行测试：

   flutter test
   

6. 提交更改：

   git commit -am '添加你的提交信息'
   

7. 推送到你的 fork：

   git push origin feature/your-feature-name
   

8. 创建拉取请求：

   • 返回原始仓库并创建一个从你的 fork 发起的拉取请求。

9. 等待审核：

   • 我们会审查你的拉取请求并提供反馈。

许可证

ModelMate 以 MIT 许可证发布。

致谢

感谢所有帮助改进 ModelMate 的贡献者。灵感来源于 Flutter 状态管理的简洁性。

示例代码

以下是完整的示例代码：

// example/lib/main.dart
import 'package:example/app.dart';
import 'package:example/counter_model.dart';
import 'package:flutter/material.dart';

import 'package:model_mate/model_mate.dart';

void main() {
  runApp(
    ModelMateProvider(
      models: [
        CounterModel(0), // 初始化计数器模型
      ],
      child: const MainApp(), // 主应用
    ),
  );
}