Flutter中央管理插件centralstation的功能使用

Flutter中央管理插件centralstation的功能使用

Central Station 是一个用于 Flutter 的简单命令/事件处理引擎。

引言

什么是命令？

• 命令是一些程序步骤的序列，用于执行状态变更。
• 我们希望命令被执行。
• 执行命令可能会产生结果。
• 例如：“获取股票代码X的报价”。

什么是事件？

• 事件表示某些事情已经发生。
• 事件是状态变更的证据。
• 例如：“已获得股票代码X的报价，价格为Y。”

特性

• 命令通常需要更多时间来执行。
• 命令可能会引发一些事件，这些事件需要通知其他组件以进行展示或跟踪。
• 命令在执行过程中可能会失败。
• 单个命令将由单个处理器处理该命令。
• 单个事件可以被多个组件监听。

开始使用

假设我们有一个获取股票报价的命令和相应的事件：

class GetStockQuoteCommand {
  final String code;
  GetStockQuoteCommand(this.code);
}

class StockQuoteObtainedEvent {
  final String code;
  final num price;
  StockQuoteObtainedEvent(this.code, this.price);
}

/// 实现
Stream getStockQuote(dynamic command) async* {
  var cmd = command as GetStockQuoteCommand;
  num price = await ... // 进行网络操作;

  dispatchEvent(StockQuoteObtainedEvent(cmd.code, price)); // 通知其他组件

  yield price; // 命令结果
}

要使用 Central Station，首先初始化运行时环境：

final CentralStationRuntime runtime = CentralStationRuntime(
  commandHandlers: {
    GetStockQuoteCommand: getStockQuote,
  },
  eventHandlers: [],  // 如果有事件处理器，请设置此选项
);

在小部件构建期间初始化 CentralStation：

Widget build(BuildContext context) {
  return MaterialApp(
    home: CentralStation(
      runtime: runtime,
      child: ... // 像平常一样构建您的小部件
    ),
  );
}

在某个时刻执行命令，如下所示：

RaisedButton(
  key: btnKey,
  child: Text("获取报价！"),
  onPressed: () async {
    var stockPrice = await CentralStation.sendCommand(context, GetStockQuoteCommand(this.code)).first;
    setState(() {
      // 更新UI
      this.price = stockPrice;
    });
  },
),

还有其他一些有趣的特性，如命令链、显示等待文本等。

在实际项目中，我使用了 Central Station 与 BLOC 模式结合（使用事件处理器将事件桥接到 BLOC 的 dispatch 方法），这使得项目易于管理。

欢迎探索其他可能性，并期待您的反馈。

进一步阅读

• CQRS: CQRS概念
• CQRS 和事件溯源概念: Axoniq资源
• BLOC模式: Flutter项目架构

示例代码

以下是一个完整的示例代码，展示了如何使用 centralstation 插件。

import 'package:flutter/material.dart';

import "package:centralstation/centralstation.dart";
import 'command.dart';
import 'event.dart';

void main() {
  CentralStationRuntime runtime = CentralStationRuntime(
    commandHandlers: {
      GetStockQuoteCommand: getStockQuote,
    },
    eventHandlers: [],
  );

  runApp(MaterialApp(
    home: CentralStation(
      runtime: runtime,
      child: MyHomePage(),
    ),
  ));
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _price = "";

  void _getStockQuote() async {
    var stockPrice = await CentralStation.sendCommand(context, GetStockQuoteCommand("X")).first;
    setState(() {
      _price = stockPrice.toString();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Central Station 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '股票价格:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              _price,
              style: TextStyle(fontSize: 20),
            ),
            RaisedButton(
              onPressed: _getStockQuote,
              child: Text('获取报价'),
            )
          ],
        ),
      ),
    );
  }
}