Flutter微框架Nylo（二十四）：Events 事件当您需要在应用程序中发生某些事情后处理逻辑时，事件非常强大。N

当您需要在应用程序中发生某些事情后处理逻辑时，事件非常强大。Nylo 提供了一个简单的事件实现，允许您调用注册到事件的侦听器。侦听器可以从事件的有效负载执行逻辑。

Nylo 事件在 app/events/ 目录中进行管理。要注册事件，请将其添加到 config/events.dart map中。

了解事件

事件，也称为“事件驱动编程”，是一种编程范式，其中程序的流程由用户操作、传感器输出或从其他程序或线程传递的消息等事件决定。

事件示例

下面是应用程序可能具有的事件的一些示例：

用户注册
用户登录
产品加入购物车
付款成功

在 Nylo 中，创建事件后，您可以将侦听器添加到该事件中，以处理您所需的需求。

如果我们使用最后一个示例“成功付款”，我们可能需要执行以下操作：

清除用户的购物车和本地存储的任何结账会话
使用 Google 跟踪代码管理器等服务记录购买情况以进行分析

实例

在这个实际示例中，我们将假设我们拥有一个销售 T 恤的电子商务应用程序。

首先，创建一个事件：

dart run nylo_framework:main make:event payment_successful_event

创建事件后，您将能够在 lib/app/events/ 目录中查看它。

如果我们打开我们刚刚创建的文件 lib/app/events/payment_successful_event.dart，您应该会看到下面的类。

import 'package:nylo_framework/nylo_framework.dart';

class PaymentSuccessfulEvent implements NyEvent {

  final listeners = {
    DefaultListener: DefaultListener(),
  };
}

class DefaultListener extends NyListener {
  handle(dynamic event) async {
    // 事件荷载
  }
}

在此文件中，我们将添加两个新侦听器， SanitizeCheckoutListener 以及 GTMPurchaseListener .

以下是我们活动中的实现。

import 'package:nylo_framework/nylo_framework.dart';
import 'package:google_tag_manager/google_tag_manager.dart' as gtm;

class PaymentSuccessfulEvent implements NyEvent {

  final listeners = {
    SanitizeCheckoutListener: SanitizeCheckoutListener(),
    GTMPurchaseListener: GTMPurchaseListener(),
  };
}

class SanitizeCheckoutListener extends NyListener {
  handle(dynamic event) async {
    // clear the cart in storage
    await NyStorage.store('cart', null);
  }
}

class GTMPurchaseListener extends NyListener {
  handle(dynamic event) async {
    // Get payload from event
    Order order = event['order'];

    // Push event to gtm (Google tag manager).
    gtm.push({
      'ecommerce': {
        'purchase': {
          'actionField': {
            'id': order.id, // Transaction ID. Required for purchases and refunds.
            'revenue': order.revenue, // Total transaction value (incl. tax and shipping)
            'tax': order.tax,
            'shipping': order.shipping
          },
          'products': order.line_items
        }
      }
    });
  }
}

接下来，打开 config/events.dart 文件并注册该 PaymentSuccessfulEvent 类。

import 'package:flutter_app/app/events/payment_successful_event.dart';

final Map<Type, NyEvent> events = {
  LoginEvent: LoginEvent(),
  LogoutEvent: LogoutEvent(),
  PaymentSuccessfulEvent: PaymentSuccessfulEvent()
};

现在，当用户进行购买时，我们可以从应用程序调度事件。

stripePay(List<Product> products) async {

  // create the order
  Order? order = await api<OrderApiService>((api) => api.createOrder(products));
  if (order == null) {
    return;
  }

  // send event
  await event<PaymentSuccessfulEvent>(data: {'order': order});
...

这就是我们使用新事件所需的全部内容。

调度事件

您可以通过调用以下方法调度事件：

loginUser() async {
    User user = await _apiService.loginUser('email': '...', 'password': '...');

    event<LoginEvent>(data: {'user': user});
}

这将调用 LoginEvent 事件。

在config/events.dart 文件中注册的 LoginEvent 类非常重要。

设置侦听器

侦听器将添加到事件中。侦听器必须扩展 NyListener 类，并具有工作 handle 方法。

下面是一个示例。

import 'package:nylo_framework/nylo_framework.dart';

class LoginEvent implements NyEvent {

  final listeners = {
    DefaultListener: DefaultListener(),
    AuthUserListener: AuthUserListener(),
  };
}

class DefaultListener extends NyListener {
  handle(dynamic event) async {
    // handle the payload from event
  }
}

class AuthUserListener extends NyListener {
  handle(dynamic event) async {
    // handle the payload from event
  }
}

侦听器的方法

您可以在该 handle(dynamic event) 方法中为侦听器添加所有逻辑。

句柄中的事件参数将包含事件中的任何数据，下面是一个例子。

// From your widget
loginUser() async {
    User user = await _apiService.loginUser('email': '...', 'password': '...');

    event<LoginEvent>({'user': user});
}

// Login event file
...
class LoginEvent implements NyEvent {

  final listeners = {
    DefaultListener: DefaultListener(),
  };
}

class DefaultListener extends NyListener {
  handle(dynamic event) async {
    print(event['user']); // instance of User
  }
}