Flutter广播动作插件action_broadcast的使用

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

Flutter广播动作插件action_broadcast的使用

action_broadcast 是一个简单的全局广播系统,类似于Android的本地广播。它允许你在Flutter应用中通过广播机制实现组件之间的通信。

使用步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加 action_broadcast 依赖:

dependencies:
  flutter:
    sdk: flutter
  action_broadcast: ^最新版本号

然后运行 flutter pub get 来安装该包。

2. 导入库

在需要使用的文件中导入 action_broadcast 库:

import 'package:action_broadcast/action_broadcast.dart';

监听广播

传统方式

你可以通过 registerReceiver 方法来注册监听器,并处理接收到的广播。

const String actionUserLogin = 'actionUserLogin';
const String actionUserInfoChange = 'actionUserInfoChange';
const String actionLogout = 'actionLogout';

class _ExampleState extends State<Example> {
  StreamSubscription? receiver;

  @override
  void initState() {
    super.initState();

    receiver = registerReceiver([actionUserLogin, actionUserInfoChange, actionLogout]).listen((intent) {
      switch (intent.action) {
        case actionUserLogin:
          // 处理用户登录事件
          break;
        case actionUserInfoChange:
          // 处理用户信息变更事件
          break;
        case actionLogout:
          // 处理用户登出事件
          break;
      }
    });
  }

  @override
  void dispose() {
    receiver?.cancel();
    super.dispose();
  }
}

使用 AutoCancelStreamMixin

为了简化 StreamSubscription 的管理,你可以混入 AutoCancelStreamMixin

class _ExampleState extends State<Example> with AutoCancelStreamMixin {
  @override
  Iterable<StreamSubscription> get registerSubscriptions sync* {
    yield registerReceiver([actionUserLogin]).listen((intent) {
      setState(() {
        // 处理用户登录事件
      });
    });

    yield registerSingleReceiver(actionLogout).listen((intent) {
      setState(() {
        // 处理用户登出事件
      });
    });
  }
}

发送广播

你可以使用 sendBroadcast 方法来发送广播。

sendBroadcast(actionUserLogin, data: 'accountId');
sendBroadcast(actionUserInfoChange, extras: {'nickname': 'asdasd'});
sendBroadcast(actionLogout);

完整示例 Demo

以下是一个完整的示例,展示了如何使用 action_broadcast 实现简单的计数器功能。

import 'package:action_broadcast/action_broadcast.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

const String actionIncrement = 'actionIncrement';
const String actionDecrease = 'actionDecrease';
const String actionChange = 'actionChange';

class _MyHomePageState extends State<MyHomePage> with AutoCancelStreamMixin {
  int _counter = 0;

  @override
  Iterable<StreamSubscription> get registerSubscriptions sync* {
    yield registerReceiver([actionIncrement, actionDecrease, actionChange]).listen((intent) {
      switch (intent.action) {
        case actionIncrement:
          setState(() {
            _counter++;
          });
          break;
        case actionDecrease:
          setState(() {
            _counter--;
          });
          break;
        case actionChange:
          setState(() {
            _counter = intent.data ?? 0;
          });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            const SizedBox(height: 72),
            TextButton(
              child: const Text('Decrease'),
              onPressed: () {
                sendBroadcast(actionDecrease);
              },
            ),
            const SizedBox(height: 16),
            TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              textInputAction: TextInputAction.done,
              onSubmitted: (value) {
                if (value.isNotEmpty) {
                  sendBroadcast(actionChange, data: int.tryParse(value));
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          sendBroadcast(actionIncrement);
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

这个示例展示了如何通过广播机制实现按钮点击、文本输入等操作,并更新UI。希望这个示例能帮助你更好地理解和使用 action_broadcast 插件。


更多关于Flutter广播动作插件action_broadcast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter广播动作插件action_broadcast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用action_broadcast插件的示例代码。action_broadcast插件允许你在Flutter应用中发送和接收广播动作,这在跨组件通信或处理全局事件时非常有用。

首先,确保你已经在pubspec.yaml文件中添加了action_broadcast依赖:

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

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

接下来,让我们编写一些示例代码来展示如何使用这个插件。

1. 发送广播动作

你可以在任何地方发送广播动作,例如在按钮点击事件中:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Action Broadcast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 发送广播动作
              ActionBroadcast.of(context).broadcast('custom_action', {'key': 'value'});
            },
            child: Text('Send Broadcast'),
          ),
        ),
      ),
    );
  }
}

2. 接收广播动作

要在另一个组件或全局范围内接收广播动作,你需要监听这些动作。这可以通过使用ActionBroadcastListener来实现:

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

class BroadcastListenerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ActionBroadcastListener(
      actions: ['custom_action'],  // 监听的动作名称列表
      builder: (context, action, payload) {
        // 处理接收到的广播动作
        if (action == 'custom_action') {
          final data = payload as Map<String, dynamic>;
          print('Received broadcast: ${data['key']}');
        }
        return Scaffold(
          appBar: AppBar(
            title: Text('Broadcast Listener'),
          ),
          body: Center(
            child: Text('Listening for broadcast actions...'),
          ),
        );
      },
    );
  }
}

3. 将监听器添加到应用

最后,将监听器组件添加到你的应用中。例如,你可以将其放在主页面或其他合适的位置:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Action Broadcast Example'),
        ),
        body: Stack(
          children: [
            BroadcastListenerWidget(),  // 添加监听器组件
            Center(
              child: ElevatedButton(
                onPressed: () {
                  ActionBroadcast.of(context).broadcast('custom_action', {'key': 'value'});
                },
                child: Text('Send Broadcast'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,当你点击按钮时,会发送一个名为custom_action的广播动作,并携带一个包含key: 'value'的payload。BroadcastListenerWidget组件会监听这个广播动作,并在接收到时打印出payload中的key值。

请注意,ActionBroadcastListener需要在Flutter的上下文(BuildContext)中使用,这通常意味着你需要将其放在小部件树中。此外,ActionBroadcast.of(context)用于在发送广播时获取当前的广播实例。

希望这能帮助你理解如何在Flutter项目中使用action_broadcast插件!

回到顶部