Flutter - 提供程序未更新卡在加載屏幕中的狀態

Question

我需要專家意見。 我是顫振的新手，我似乎無法解決這個問題。

這是我的問題：

我正在構建一個將連接到 MQTT 的應用程序。 訂閱一個主題。 說話題A。之后，它會發布一些說話題B的東西。然后它會收到話題A的一些指令。

因此，當它初始化 MQTT 並完成連接過程時，我想顯示加載屏幕。 當它完成連接時，我想只顯示一個文本的主屏幕。

這是我的提供程序處理程序；

import 'package:dnb/screens/loading_screen.dart';
import 'package:dnb/screens/main_screen.dart';
import 'package:flutter/material.dart';
enum MQTTAppConnectionState { connected, disconnected, connecting }
class MQTTAppState with ChangeNotifier {
  MQTTAppConnectionState _appConnectionState =
      MQTTAppConnectionState.disconnected;
  void setAppConnectionState(MQTTAppConnectionState state) {
    _appConnectionState = state;
    notifyListeners();
  }
  MQTTAppConnectionState get getAppConnectionState => _appConnectionState;
  Widget get getRoute {
    return _appConnectionState == MQTTAppConnectionState.connected
        ? MainScreen()
        : LoadingScreen();
  }
}

然后這是我的 main.dart：

import 'package:dnb/services/MQTTAppState.dart';
import 'package:dnb/services/MQTTService.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(DigitalNoticeBoard());
class DigitalNoticeBoard extends StatefulWidget {
  @override
  _DigitalNoticeBoardState createState() => _DigitalNoticeBoardState();
}
class _DigitalNoticeBoardState extends State<DigitalNoticeBoard> {
  @override
  void initState() {
    mqttService();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: ChangeNotifierProvider(
        create: (_) => MQTTAppState(),
        child: Scaffold(
          body: Consumer<MQTTAppState>(
              builder: (_, mqttAppState, __) => mqttAppState.getRoute),
        ),
      ),
    );
  }
}

正如您在 main.dart 中看到的，我在 initState() 中啟動了 mqttService()。 當我運行代碼時，這就是我得到的：

Performing hot restart...
Syncing files to device POCOPHONE F1...
Restarted application in 1,587ms.
I/flutter (16925): ::Mosquitto client connecting....
E/AccessibilityBridge(16925): VirtualView node must not be the root node.
I/flutter (16925): ::OnConnected client callback - Client connection was sucessful
I/flutter (16925): ::Mosquitto client connected
I/flutter (16925): ::Subscription confirmed -> topic -> topicName
I/flutter (16925): ::Change notification:: topic -> <topicName>, payload ->  <00010000011000000000> 

這是預期的輸出，但我的應用程序卡在加載屏幕中。 打印客戶端連接我的應用程序的那一刻應該從加載屏幕移動到主屏幕。 這就是我在 mqttService() 中所做的：

try {
  mqttAppState.setAppConnectionState(MQTTAppConnectionState.connecting); //Passing connecting
  await client.connect();
} on Exception catch (e) {
  print('::client exception - $e');
  //client.disconnect();
}

進而：

/// Check we are connected
if (client.connectionStatus.state == MqttConnectionState.connected) {
  mqttAppState.setAppConnectionState(MQTTAppConnectionState.connected); //Passing connected
  print('::Mosquitto client connected');
} else {
  /// Use status here rather than state if you also want the broker return code.
  print(
      '::ERROR Mosquitto client connection failed - disconnecting, status is ${client.connectionStatus}');
  client.disconnect();
}

Answer 1

@Momshad 晚餐

mqttService()

try {
  mqttAppState.setAppConnectionState(MQTTAppConnectionState.connecting); //Passing connecting
  await client.connect();
} on Exception catch (e) {
  print('::client exception - $e');
  //client.disconnect();
}

這個函數上的mqttAppState是什么？

我認為MQTTAppState在create: (_) => MQTTAppState()和你的mqttAppState不同。

你可以試試這個建議：

MQTTAppState mqttAppState;

  @override
  void initState() {
    mqttAppState = MQTTAppState();
    mqttService();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider.value(
        value: mqttAppState,
        child: Scaffold(
          body: Consumer<MQTTAppState>(
              builder: (_, mqttAppState, __) => mqttAppState.getRoute),
        ),
      ),
    );
  }