Flutter插件simprokmachine的介绍与使用

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 Flutter

Flutter插件simprokmachine的介绍与使用

Flutter插件simprokmachine简介

每个应用程序都由相互引用的类组成,这些类又引用其他类,形成一个类的树形结构。在这个结构中,每个类只知道它的子类,而不知道其父类。

通常情况下,类之间的通信通过调用子类的方法和属性来传递数据“向下”,或者通过触发回调将数据“向上”传递给父类。

此外,我们有许多模式可以使这种通信更简单,例如委托、外观、观察者、命令等。甚至还没有开始讨论如何从逻辑层向用户界面传递数据。

Flutter插件simprokmachine问题

每次组织通信时,都需要我们决定使用哪种模式以及如何处理它。这需要注意力,并且很容易导致意外的错误。

解决方案

simprokmachine 是一个框架,用于自动化应用程序组件(称为“机器”)之间的通信。

如何使用Flutter插件simprokmachine

机器

机器是在您的应用程序中接收和处理输入数据并可能发出输出的一个实例。

要创建它,请使用 ChildMachine 类。

class PrinterMachine extends ChildMachine<String, bool> {
  
  @override
  void process(String? input, Handler<bool> callback) {
    log(input);
  }
}

如果您的机器必须使用其输入更新 Flutter 小部件,请改用 ChildWidgetMachine。结合 MachineConsumer 来在需要的地方更新 UI。

class PrinterWidgetMachine extends ChildWidgetMachine<String, bool> {

  @override
  Widget child() {
    return MaterialApp( 
        home: Scaffold(
          body: Center(
            child: MachineConsumer<String, bool>(
              initial: (BuildContext context) => Text("UI before first input was received"),
              builder: (BuildContext context, String? input, Handler<bool> callback) => Text("UI when input received: $input")
            ),
          ),
        ),
    ),
  }
}

main() 函数中使用 runRootMachine() 方法启动流程。

void main() {
    runRootMachine<String, bool>(
        root: PrinterWidgetMachine(),
    );
}

这不会打印任何内容,只会打印 null,因为在调用 startRootMachine() 后,根订阅了子机器,并触发了带有 null 值的 process() 方法。

使用 Handler<Output> callback 发出输出。

class EmittingMachine extends ChildMachine<String, bool> {
  
  void process(String? input, Handler<bool> callback) {
    if (input != null) { 
      log("input: \(input)");
    } else {
      callback(false); // 发出输出
    }
  }
}

当一个机器是 WidgetMachine,另一个是普通的 Machine 时,使用 mergeWidgetMachine() 将它们合并。

void main() {
    runRootMachine<String, bool>(
        root: mergeWidgetMachine(
          main: PrinterWidgetMachine(),
          secondary: { PrinterMachine(), },
        ), 
    );
}

要将多个机器合并在一起,请使用 merge()

final Machine<Input, Output> machine1 = ...;
final Machine<Input, Output> machine2 = ...;

... = merge({
    machine1,
    machine2,
});

为了避免在 runRootMachine() 中使机器混乱,可以使用 ParentMachineParentWidgetMachine 类。

class IntermediateLayer extends ParentMachine<String, bool> {

  @override
  Machine<String, bool> child() {
    return PrinterMachine(); // 或 PrinterWidgetMachine() 如果扩展了 ParentWidgetMachine
  }
}

要映射或忽略输入,请使用 inward()

... = machine.inward((ParentInput parentInput) {
    return Ward.values([ChildInput(), ChildInput(), ChildInput()]); // 传递零个、一个或多个输出。
})

要映射或忽略输出,请使用 outward()

... = machine.outward((ChildOutput childOutput) {
    return Ward.values([ParentOutput(), ParentOutput(), ParentOutput()]); // 传递零个、一个或多个输出。
});

当接收到输出时,要将输入发送回子机,请使用 redirect()

... = machine.redirect((ChildOutput childOutput) { 
    // 返回
    // Direction.prop() - 将 ChildOutput 推进到根。
    // Direction.back(Ward.values([ChildInput()])) - 将子输入发送回子机。
    ...
});

查看 样本维基 以获取更多关于 API 和如何使用的详细信息。

杀手级功能

  • 声明式描述应用程序行为的方式。
  • 自动化的并发管理,避免了竞态条件、死锁和头痛。
  • 灵活。每个现有组件都可以成为机器。
  • 模块化。每个机器都可以被描述一次并轻松重用。
  • 跨平台。支持 Kotlin 和 Native iOS。

安装

pubspec.yaml 文件中添加以下行:

dependencies:
    simprokmachine: ^1.1.3

现在可以在 Dart 代码中使用:

import 'package:simprokmachine/simprokmachine.dart';

更多关于Flutter插件simprokmachine的介绍与使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter插件simprokmachine的介绍与使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simprokmachine 是一个在 Flutter 中用于状态管理和事件处理的插件,它采用了一种基于“机器”(Machine)的概念来管理应用程序的状态和事件流。这个插件的核心思想是将应用程序的各个部分视为独立的“机器”,每个机器都有自己的状态和事件处理逻辑,并通过事件流进行通信。

1. 安装 simprokmachine

首先,你需要在 pubspec.yaml 文件中添加 simprokmachine 依赖:

dependencies:
  flutter:
    sdk: flutter
  simprokmachine: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 基本概念

simprokmachine 的核心概念包括:

  • Machine: 一个独立的组件,负责处理输入事件并产生输出事件。每个机器都有自己的状态和逻辑。
  • Event: 事件是机器之间通信的基本单位。事件可以是用户输入、网络请求结果等。
  • State: 状态是机器的内部数据,决定了机器如何处理事件。

3. 创建一个简单的 Machine

下面是一个简单的例子,展示如何创建一个 Machine 来处理事件并更新状态。

import 'package:simprokmachine/simprokmachine.dart';

// 定义事件类型
enum MyEvent { increment, decrement }

// 定义状态类型
class MyState {
  final int counter;

  MyState(this.counter);
}

// 创建一个简单的 Machine
class CounterMachine extends Machine<MyEvent, MyState> {
  CounterMachine() : super(initialState: MyState(0));

  [@override](/user/override)
  MachineResult<MyEvent, MyState> process(MyEvent event, MyState state) {
    switch (event) {
      case MyEvent.increment:
        return MachineResult(MyState(state.counter + 1));
      case MyEvent.decrement:
        return MachineResult(MyState(state.counter - 1));
    }
  }
}

4. 使用 Machine

在 Flutter 应用中使用 Machine 时,你可以将它与 Widget 绑定,以便在 UI 中反映状态的变化。

import 'package:flutter/material.dart';
import 'package:simprokmachine/simprokmachine.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MachineWidget<MyEvent, MyState>(
        machine: CounterMachine(),
        builder: (context, state) {
          return Scaffold(
            appBar: AppBar(title: Text('Counter Example')),
            body: Center(
              child: Text('Counter: ${state.counter}'),
            ),
            floatingActionButton: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                FloatingActionButton(
                  onPressed: () {
                    context.machine.input(MyEvent.increment);
                  },
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 10),
                FloatingActionButton(
                  onPressed: () {
                    context.machine.input(MyEvent.decrement);
                  },
                  child: Icon(Icons.remove),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!