Flutter事件订阅插件eventsubscriber的使用

EventSubscriber

EventSubscriber 是一个 Flutter 小部件，每当有新的事件发生时，它会重建。这个小部件会在一个或多个事件发生时被通知并重建，从而允许显示在 Flutter 用户界面中观察对象的某些变化。

注意：运行包含的示例项目以查看工作示例。

内容

• 使用方法
• 参见
• 依赖项
• 示例
• 请求功能和报告错误

使用方法

Flutter 的 EventSubscriber 小部件需要您指定一个或多个事件，以及一个返回子小部件的 builder 函数。

// 示例
EventSubscriber(
  events: [myCount.valueChanged],  // 一个或多个事件的列表
  builder: (context, status, args) => Text('${myCount.value}'), // 返回一个文本小部件，显示当前计数值
),

参见

Event - 一个 Dart 包，向感兴趣的订阅者广播事件。

依赖项

• Flutter - 此包依赖于 Flutter 框架。
• Event - 支持创建轻量级自定义 Dart 事件，允许感兴趣的订阅者被告知发生了某事。提供跨独立包/层/模块的通知机制，仅依赖于 Dart。

示例

请参阅示例文件夹以获取更详细的示例。

import 'package:flutter/material.dart';
import 'package:event/event.dart';
import 'package:eventsubscriber/eventsubscriber.dart';

// 一个简单的计数器示例域模型
// 通常位于其自己的模块/包中
// 这里为了说明目的内联包含
class Counter {
  int value = 0;
  var valueChanged = Event(); // 声明事件

  void increment() {
    value++;
    // 广播值已更改
    valueChanged.broadcast();
  }
}

//////////////////////

// 创建域模型
var myCounter = Counter();

// Flutter 应用程序
// 当按钮被按下时，计数器值将增加。
// 更新后的值将自动更新到用户界面上。
void main() => runApp(
      MaterialApp(
        home: Column(
          children: <Widget>[
            // 订阅 'valueChanged' 域事件
            EventSubscriber(
              events: [myCounter.valueChanged],
              builder: (context, status, args) {
                return Text(myCounter.value.toString()); // 显示当前计数值
              },
            ),
            FlatButton(
              child: Text('Increment'),
              // 增加域值
              onPressed: () => myCounter.increment(),
            )
          ],
        ),
      ),
    );

请求功能和报告错误

请在 issue tracker 上输入功能请求和报告错误。

以下是完整的示例代码，包括诊断日志记录：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:eventsubscriber/eventsubscriber.dart';
import 'package:event/event.dart';

// Create the domain model
var myCounter = Counter();

// ==========================================

// Flutter application
// The myCounter.value will increment when the button is pressed.
// The changed domain value will be automatically updated in the UI.

void main() {
  // Optional diagnostic logging
  showLog(stdout, Severity.all);
  log("Starting example Counter app"); // an example log message

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("EventSubscriber Example"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //=================================
              // Subscribe to the 'valueChangedEvent' domain event
              // The handler will be run whenever the Event occurs (is broadcast)
              EventSubscriber(
                events: [myCounter.valueChangedEvent], // 可以订阅多个事件
                builder: (context, status, args) {
                  // status 是 3.0 新增的
                  return Column(
                    children: [
                      Text('Counter: ${myCounter.value}', style: TextStyle(fontSize: 24)), // 显示当前计数值

                      // 如果还没有接收到任何事件，则做些不同的处理
                      if (status.hasReceivedFirstEvent)
                        Column(
                          children: [
                            SizedBox(height: 24),
                            //
                            Text('Received Event'),
                            Text('When: ${args.whenOccurred}'),
                            Text('Event count: ${status.numEventsReceived}'),
                            Text('Event name: ${args.eventName}'),
                            //
                            SizedBox(height: 24),
                            Text('Note: See the Flutter DevTools Logging pane'),
                            Text('for diagnostic Event related messages.'),
                          ],
                        )
                      else
                        Text('No event received yet'),
                    ],
                  );
                },
              ),

              //=================================
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: myCounter.increment, // 点击按钮时增加计数
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}