Flutter事件总线插件dart_subject的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter事件总线插件dart_subject的使用

特性

通过不同的上下文观察和发射。需要注意的是，你应该能够跟踪反初始化，以便从主题中移除观察者以防止内存泄漏。

使用方法

建议构建一个主题容器，以便在整个应用程序中充分了解使用的主题，并确保每个观察者和发射器都连接到同一个主题，从而实现在不同上下文中获取信息。

import 'package:dart_subject/dart_subject.dart';

/// 主题容器
class SubjectContainer {
  /// 定义一个主题
  var countSubject = Subject<int>();
}

在下一步中，定义一个类，该类希望观察某个值，在这种情况下，它观察一个整数。

class CounterObserver implements Observer {
  CounterObserver(Function(Observer) unsubscribe) {
    this.unsubscribe = unsubscribe;
  }
  int count = 0;

  @override
  void update(observable) {
    switch (observable.runtimeType) {
      case int:
        count = observable as int;
      default:
        break;
    }
  }

  @override
  void deinit() {
    unsubscribe(this);
  }

  @override
  late Function(Observer) unsubscribe;
}

为了有一个有用的观察者，我们需要有人希望通过定义的主题来发射。

/// 计数器发射器
class CounterEmitter extends Emitter {
  /// 调用超类的计数器发射器构造函数
  CounterEmitter(super._emitInject);
  int currentCount = 0;

  // 增加并发射
  void increment() {
    currentCount++;
    super.emit(currentCount);
  }

  // 减少并发射
  void decrement() {
    currentCount--;
    super.emit(currentCount);
  }
}

在应用程序中的使用方式如下，但可以通过依赖注入通过主题容器在不同的上下文中启动发射。

/// 应用程序起点
void main() {
  /// 初始化主题容器
  var subjectContainer = SubjectContainer();
  
  /// 观察者获取移除注入
  var observer = CounterObserver(subjectContainer.countSubject.removeObserver);
  
  /// 并将观察者添加到主题容器的观察者列表中以通知
  subjectContainer.countSubject.addObserver(observer);
  
  /// 发射器获取通知观察者注入以通过主题推送更改
  var emitter = CounterEmitter(subjectContainer.countSubject.notifyObservers);

  print("观察者: ${subjectContainer.countSubject.observers.toString()}");
  print("初始值: ${observer.count}");
  
  emitter.increment();
  print("增加后: ${observer.count}");
  
  emitter.decrement();
  print("减少后: ${observer.count}");
  
  observer.deinit();
  print("观察者: ${subjectContainer.countSubject.observers.toString()}");
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用dart_subject事件总线插件的示例代码。dart_subject是一个用于在Flutter应用中实现事件总线模式的Dart库，它允许组件之间进行松散的通信。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加dart_subject的依赖：

dependencies:
  flutter:
    sdk: flutter
  dart_subject: ^x.y.z  # 请替换为最新版本号

然后在项目根目录下运行flutter pub get来安装依赖。

2. 创建事件类

创建一个事件类来表示你想要传递的数据。例如，我们创建一个简单的CounterEvent类：

// counter_event.dart
class CounterEvent {
  final int value;

  CounterEvent(this.value);
}

3. 使用Subject进行事件监听和触发

接下来，你可以使用dart_subject中的Subject类来创建事件总线。这里是一个简单的示例，展示了如何在Flutter应用中监听和触发CounterEvent事件。

创建一个服务类来管理事件总线

// event_bus.dart
import 'package:dart_subject/dart_subject.dart';
import 'counter_event.dart';

class EventBus {
  final Subject<CounterEvent> counterSubject = Subject<CounterEvent>();

  void dispose() {
    counterSubject.close();
  }
}

在组件中监听事件

// counter_listener.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';  // 使用Provider来管理EventBus的依赖注入
import 'event_bus.dart';
import 'counter_event.dart';

class CounterListener extends StatefulWidget {
  @override
  _CounterListenerState createState() => _CounterListenerState();
}

class _CounterListenerState extends State<CounterListener> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    final eventBus = Provider.of<EventBus>(context, listen: false);
    eventBus.counterSubject.subscribe((event) {
      setState(() {
        _counter = event.value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Counter: $_counter'),
    );
  }
}

在组件中触发事件

// counter_button.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';  // 使用Provider来管理EventBus的依赖注入
import 'event_bus.dart';
import 'counter_event.dart';

class CounterButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final eventBus = Provider.of<EventBus>(context);

    return ElevatedButton(
      onPressed: () {
        int newValue = (Provider.of<EventBus>(context, listen: false).counterSubject.latestOrNull?.value ?? 0) + 1;
        eventBus.counterSubject.next(CounterEvent(newValue));
      },
      child: Text('Increment Counter'),
    );
  }
}

使用Provider进行依赖注入

在main.dart文件中，使用Provider来管理EventBus的依赖注入：

// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'event_bus.dart';
import 'counter_listener.dart';
import 'counter_button.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<EventBus>(
          create: (_) => EventBus(),
          dispose: (_, eventBus) => eventBus.dispose(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Event Bus Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CounterListener(),
            SizedBox(height: 20),
            CounterButton(),
          ],
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在Flutter项目中使用dart_subject事件总线插件进行组件间的通信。通过创建一个事件类、一个事件总线管理类和两个组件（一个监听器和一个触发器），你可以实现简单的事件驱动架构。使用Provider进行依赖注入可以方便地管理事件总线的生命周期。

回到顶部