Flutter插件iconnect的使用方法

Flutter插件iconnect的使用方法

如何使用Flutter插件iconnect

1. 在pubspec.yaml文件中添加iconnect包，然后在代码文件中导入iconnect：

import 'package:iconnect/iconnect.dart';

1. 定义一个简单的类作为模型：

class CounterModel {
  int value = 0;
  CounterModel(this.value);  

  // 增加值的方法
  void increment(int step) {  
    value = value + step;  
  }
}

1. 创建一个或多个实例：

// 创建第一个实例并注册
CounterModel _first = CounterModel(0);  
final first = register(_first);

// 创建第二个实例并注册
CounterModel _second = CounterModel(0);  
final second = register(_second);

1. 提供器：仅需在应用中使用一次，所有模型将保存在此处：

void main() {
  runApp(provider(MyApp()));
}

1. 连接和监听：如果模型通过dispatch发生变化，它会自动重建：

Widget showCounter() {
  return connect((context) {
    print('ShowCounter build ');
    listen(context, first);
    return ShowCounterOrigin(value: first.value);
  });
}

1. 分发：所有监听模型的部件都会重建：

class ShowButtonOrigin extends StatelessWidget {
  ShowButtonOrigin({Key? key, this.increase}) : super(key: key);
  final VoidCallback? increase;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: increase,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    );
  }
}

// 不会重建，因为我们没有在这里监听`first`
class ShowButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ShowButtonOrigin(
      increase: () => dispatch(first, () => first.increment(1)),
    );
  }
}

使用mixin定义模型

我们还可以使用mixin来定义模型：

class CounterModel with IConnect {
  int value = 0;

  CounterModel(this.value) {
    // 注册模型
    register();
  }

  // 增加值的方法
  void increment(int step) {
    value = value + step;
  }
}

然后我们可以：

1. 简单地创建实例：

CounterModel first = new CounterModel(0);
CounterModel second = new CounterModel(0);

1. 在模型中使用listen, dispatch, register, unregister等方法：

first.listen();
first.dispatch();

1. 我们无需在任何地方导入iconnect。

iconnect是什么？

iconnect是最简单快速的状态管理库之一，它只处理共享模型给小部件，它是类型安全的，并支持所有平台。你不需要像provider和redux这样的大型框架，它们考虑了太多的事情。但是它们用许多概念和代码解决了简单的事情。

• 可以为模型创建多个实例。
• 当模型更改时，只有监听它的部件会重建。
• 整个库只有两个函数：provider和connect。
• 可以使用mixin IConnect来定义模型。
• 可以使用listen, dispatch, register, unregister等函数，模型只是一个简单的类。
• 如果你在模型中定义了dispose方法，当注销时会运行。

六个函数，零概念，这就是连接

我们的API只有六个简单的函数，这就是全部：

• provider/connect
• register/unregister
• dispatch/listen

provider是一个函数，用于初始化应用程序，因此所有模型都可以与小部件树一起工作。

你只需在应用程序中使用一次即可。

定义模型本身，没有任何规则，我们只需要将其与小部件树连接。

它不是基于类型，你为模型本身定义它。模型是你创建的类，没有任何规则，没有基类或接口。我们将模型作为实例使用，而不是类型，因此我们可以为相同的模型类型添加多个实例。你可以使用register和unregister来添加或移除模型。你可以在小部件中使用已注册的模型，这意味着小部件不会重新渲染。你应该监听已注册的模型，当它分派更改事件时，你的小部件会重新渲染。

设计小部件时只为其本身设计，没有任何规则，你不需要知道连接。

连接函数返回一个小部件，你必须提供一个带有构建函数的函数，在那里你可以使用模型或监听模型。

关于异步模型没有任何概念，我们应该只为模型做单一的事情。

它可以在你的模型中与future和stream一起工作，监听和分发可以简单地更新UI。

开始学习

你可以在示例文件夹中找到使用方法，这是一个简单的计数器应用程序，它演示了以下内容：

• 如何定义模型并注册它。
• 如何分发和监听。
• 如何与future和AsyncSnapshot一起工作，并处理错误。
• 如何与stream一起工作并更新UI。

示例代码

以下是一个简单的示例代码，展示了如何使用iconnect：

import 'package:flutter/material.dart';
import 'package:iconnect/iconnect.dart';
import 'package:example/app/app.dart';

Future<void> main() async {
  runApp(provider(const MyApp(), initState));
}