如何将MQTT回调接收的数据传递到Flutter StatefulWidget调用setState更新

你需要先在State类中定义存储接收数据的状态变量，再在MQTT监听回调中调用setState更新变量即可触发UI重绘，完整实现流程如下：

1. 定义状态变量与监听订阅对象 #

在State子类中声明变量存储接收的payload、主题，以及Stream订阅对象用于后续资源释放：

import 'package:mqtt_client/mqtt_client.dart';
import 'package:mqtt_client/mqtt_server_client.dart';
import 'package:flutter/material.dart';

class MqttDisplayPage extends StatefulWidget {
  const MqttDisplayPage({super.key});

  @override
  State<MqttDisplayPage> createState() => _MqttDisplayPageState();
}

class _MqttDisplayPageState extends State<MqttDisplayPage> {
  // 存储接收的MQTT数据
  String? _receivedPayload;
  String? _receivedTopic;
  // 存储监听订阅，用于后续取消避免内存泄漏
  StreamSubscription<List<MqttReceivedMessage<MqttMessage>>>? _mqttSubscription;
  // MQTT客户端实例，你可以按自己的需求初始化
  late MqttServerClient client;

2. 在initState中设置MQTT监听 #

在组件初始化生命周期initState中完成MQTT初始化、连接、订阅主题后，设置监听并在回调中调用setState更新状态：

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

  void _initMqttAndConnect() async {
    // 这里保留你原有MQTT客户端初始化、连接、订阅主题的逻辑
    client = MqttServerClient('你的MQTT broker地址', '客户端标识');
    client.port = 1883;
    client.keepAlivePeriod = 60;
    // 省略连接、订阅主题的原有代码
    // ...

    // 修改原有监听逻辑，加入setState更新
    _mqttSubscription = client.updates!.listen((List<MqttReceivedMessage<MqttMessage>> c) {
      final MqttPublishMessage message = c[0].payload as MqttPublishMessage;
      final payload = MqttPublishPayload.bytesToStringAsString(message.payload.message);
      final topic = c[0].topic;
      // 先判断组件是否还挂载，避免组件销毁后调用setState报错
      if (mounted) {
        setState(() {
          _receivedPayload = payload;
          _receivedTopic = topic;
        });
      }
      print('Received message:$payload from topic: $topic>');
    });
  }

3. 在build方法中展示数据 #

在组件UI中直接使用定义的状态变量即可：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MQTT数据展示')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('接收主题：${_receivedTopic ?? '暂未收到数据'}'),
            const SizedBox(height: 20),
            Text('接收内容：${_receivedPayload ?? '暂未收到数据'}'),
          ],
        ),
      ),
    );
  }

4. 资源释放 #

在组件销毁时取消监听，避免内存泄漏：

@override
  void dispose() {
    // 取消MQTT监听
    _mqttSubscription?.cancel();
    // 按需断开MQTT连接
    client.disconnect();
    super.dispose();
  }
}

注意：不要将监听逻辑放在build方法中，否则组件每次重绘都会重复注册监听，导致多次回调和内存泄漏。

内容的提问来源于stack exchange，提问作者M3R ELEC