Flutter订阅发布功能插件subpub的使用

Flutter订阅发布功能插件subpub的使用

SubPub

SubPub是一个轻量且高效的Flutter状态管理解决方案，它实现了发布者-订阅者模式，并带有自动依赖跟踪功能。

SubPub Example

特性

  • 🎯 简单的发布者-订阅者模式：易于理解的状态管理模式。
  • 🔄 自动依赖跟踪：订阅者会自动跟踪它们的依赖项。
  • 🛠 宏驱动：使用Dart宏生成干净且高效的代码。
  • 🎨 为Flutter设计：专为Flutter应用程序设计。
  • 🔒 类型安全：全类型安全的状态管理。
  • 🏃 最少样板代码：创建发布者时只需少量代码。

安装

在pubspec.yaml文件中添加subpub：

dependencies:
  subpub: ^0.0.1

关于Dart宏的重要说明

SubPub使用了Dart实验性的宏功能。由于当前处于实验阶段，因此需要注意一些重要的设置步骤和已知问题：

  1. 在项目的analysis_options.yaml文件中启用宏实验：
analyzer:
  enable-experiment:
    - macros
  1. 已知VS Code问题：由于VS Code当前处理来自外部包的宏定义存在限制（dart-lang/sdk#55670），你可能会遇到分析器无法检测到宏生成的定义的问题。如果发生这种情况：

解决方法：

  • 使用IDE中的“转到定义”功能去定义[@Publish](/user/Publish)宏的位置。
  • 然后返回到你的项目文件。
  • 这些定义现在应该会被正确检测并可用。

这是实验性宏功能的一个暂时限制，将在未来更新中得到解决。

使用

基本示例：单个发布者

首先，我们来看一个使用单个发布者的简单计数器示例：

// 定义你的发布者，并用[@Publish](/user/Publish)宏进行注解，
// 以自动生成私有字段的getter并确保发布者是一个单例实例。
[@Publish](/user/Publish)()
class CounterPublisher extends Publisher {
  // 只创建私有字段，公共getter将自动生成！
  int _count = 0;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听者状态已更改
  }
}

// 在小部件中使用它
class CounterWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = CounterPublisher.instance;

    return Subscriber((context) => Column(
      children: [
        // 在订阅者范围内的任何地方轻松访问状态！
        Text('Count: ${counter.count}'),
        ElevatedButton(
          onPressed: () => counter.increment(), // 点击按钮时增加计数
          child: Text('Increment'),
        ),
      ],
    ));
  }
}

高级示例：多个发布者

接下来，我们看看如何一起使用多个发布者：

// 定义多个发布者
[@Publish](/user/Publish)()
class ThemePublisher extends Publisher {
  bool _isDarkMode = false;

  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    notifyListeners(); // 通知所有监听者状态已更改
  }
}

[@Publish](/user/Publish)()
class UserPublisher extends Publisher {
  // 不推荐初始化值为空字符串、布尔值等。
  // 更推荐使用null/可选类型(fpdart)、late或密封类类型。
  // 但在这个例子中，我们直接使用空字符串。
  String _username = '';

  void updateUsername(String newName) {
    _username = newName;
    notifyListeners(); // 通知所有监听者状态已更改
  }
}

// 在单个小部件中使用多个发布者
class DashboardWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = CounterPublisher.instance;
    final theme = ThemePublisher.instance;
    final user = UserPublisher.instance;

    return Subscriber((context) => Container(
      color: theme.isDarkMode ? Colors.black : Colors.white, // 根据主题切换背景颜色
      child: Column(
        children: [
          Text('Welcome, ${user.username}!'), // 显示用户名
          Text('Count: ${counter.count}'), // 显示计数器
          ElevatedButton(
            onPressed: () => theme.toggleTheme(), // 切换主题
            child: Text('Toggle Theme'),
          ),
          ElevatedButton(
            onPressed: () => counter.increment(), // 增加计数器
            child: Text('Increment Counter'),
          ),
        ],
      ),
    ));
  }
}

更多关于Flutter订阅发布功能插件subpub的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter订阅发布功能插件subpub的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现订阅发布（Pub-Sub）功能，你可以使用subpub这个插件。subpub是一个轻量级的事件总线库，适用于在Flutter应用中不同组件之间进行通信。下面是一个简单的代码案例，展示如何在Flutter项目中使用subpub插件来实现订阅发布功能。

步骤 1: 添加依赖

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

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

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

步骤 2: 初始化Pub-Sub实例

在你的应用中，你需要创建一个SubPub实例。通常，你会在一个全局可访问的地方进行初始化，比如主应用文件（main.dart）中。

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

void main() {
  // 初始化SubPub实例
  final subPub = SubPub();

  runApp(MyApp(subPub: subPub));
}

class MyApp extends StatelessWidget {
  final SubPub subPub;

  MyApp({required this.subPub});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(subPub: subPub),
    );
  }
}

步骤 3: 发布事件

在某个组件中，你可以发布一个事件。例如，在一个按钮点击事件中：

import 'package:flutter/material.dart';

class PublisherScreen extends StatelessWidget {
  final SubPub subPub;

  PublisherScreen({required this.subPub});

  void _publishEvent() {
    // 发布一个名为'message'的事件，携带数据'Hello, World!'
    subPub.publish('message', data: 'Hello, World!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Publisher')),
      body: Center(
        child: ElevatedButton(
          onPressed: _publishEvent,
          child: Text('Publish Message'),
        ),
      ),
    );
  }
}

步骤 4: 订阅事件

在另一个组件中，你可以订阅这个事件并处理它。例如：

import 'package:flutter/material.dart';

class SubscriberScreen extends StatefulWidget {
  final SubPub subPub;

  SubscriberScreen({required this.subPub});

  @override
  _SubscriberScreenState createState() => _SubscriberScreenState();
}

class _SubscriberScreenState extends State<SubscriberScreen> {
  String? _message;

  @override
  void initState() {
    super.initState();
    // 订阅名为'message'的事件
    widget.subPub.subscribe('message', (data) {
      setState(() {
        _message = data as String?;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Subscriber')),
      body: Center(
        child: Text(_message ?? 'Waiting for message...'),
      ),
    );
  }
}

步骤 5: 将组件组合在一起

最后，在你的主屏幕（HomeScreen）中，将发布者和订阅者组件组合在一起：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final SubPub subPub;

  HomeScreen({required this.subPub});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(child: PublisherScreen(subPub: subPub)),
          Expanded(child: SubscriberScreen(subPub: subPub)),
        ],
      ),
    );
  }
}

这个简单的例子展示了如何使用subpub插件在Flutter应用中实现基本的订阅发布功能。你可以根据需求扩展这个基础，添加更多的事件类型、处理逻辑以及复杂的组件结构。

回到顶部