Flutter消息订阅与发布插件flutter_pubsub的使用

Flutter消息订阅与发布插件flutter_pubsub的使用

特性

• 🪶 轻量级实现（少于100行代码）
• 🚀 零外部依赖
• 💡 直观的API且无冗余代码
• ⚡ 高效更新且自动管理订阅
• 🎯 类型安全的状态管理
• 📱 Flutter优先设计

安装

在你的项目 pubspec.yaml 文件中添加以下内容：

dependencies:
  pub_sub: ^1.0.0

使用

基本计数器示例

// 定义你的状态
class Counter extends Pub {
  int _count = 0;
  
  int get count => get(_count);
  
  void increment() {
    _count++;
    notifyListeners(); // 通知所有订阅者状态已更改
  }
}

// 创建一个实例
final counter = Counter();

// 在UI中使用
class CounterWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Sub(
      (_) => Text('Count: ${counter.count}'), // 订阅状态并重新构建
    );
  }
}

多个订阅者

多个小部件可以订阅相同的状态：

Widget build(BuildContext context) {
  return Column(
    children: [
      // 第一个订阅者
      Sub(
        (_) => Text('Count: ${counter.count}'),
      ),
      // 第二个订阅者
      Sub(
        (_) => Text('Is even: ${counter.count.isEven}'),
      ),
    ],
  );
}

这是如何工作的

pub_sub 使用了简单的但功能强大的发布-订阅模式实现：

1. Pub（发布者）类管理状态并通知订阅者状态变化。
2. Sub（订阅者）小部件会自动订阅状态变化并在需要时重新构建。
3. 订阅是自动管理的——无需手动清理。

最佳实践

• 对于全局状态创建单例实例。
• 状态更改后调用 notifyListeners()。
• 将状态逻辑保留在 Pub 类中。
• 使用 Sub 小部件来处理依赖于状态的UI。

与其他解决方案的比较

参与贡献

欢迎贡献！请随时提交Pull请求。对于重大更改，请先打开一个问题讨论你想要进行的更改。

许可证

该项目采用MIT许可证——详情请参阅LICENSE文件。

作者

Paurini Taketakehikuroa Wiringi

示例代码

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

// 使用Pub进行状态管理
class Counter extends Pub {
  int _count = 0;

  // 重要：将状态对象包装在一个`get`方法中。
  int get count => get(_count);

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

  void decrement() {
    _count--;
    notifyListeners(); // 通知所有订阅者状态已更改
  }
}

// 创建一个单例实例
final counter = Counter();

// 主应用
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PubSub Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const CounterScreen(),
    );
  }
}

// 计数器屏幕，多个小部件订阅相同的状态
class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PubSub Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个订阅者 - 显示计数
            Sub(
              (_) => Text(
                'Count: ${counter.count}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            const SizedBox(height: 20),
            // 第二个订阅者 - 显示奇偶性
            Sub(
              (_) => Text(
                'Number is ${counter.count.isEven ? "even" : "odd"}',
                style: Theme.of(context).textTheme.titleLarge,
              ),
            ),
            const SizedBox(height: 20),
            // 控制按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: counter.decrement,
                  child: const Icon(Icons.remove),
                ),
                const SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: counter.increment,
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}