基于流的Flutter反应式导航

编程问答 2022-08-14

问题描述

上下文

我正在构建一个蓝牙应用程序。此应用程序有4个标签，其中一个是蓝牙标签。此选项卡基于流值显示ListAllDevices页面或DeviceData页面。在ListAllDevices页面中，我搜索并连接到设备。在DeviceData页面中，我可以看到设备的某些数据并访问其他屏幕，例如说DeviceSettings和AnotherDeviceSettings。

我想做什么？

  • 交互流程：第一次单击蓝牙选项卡时，我希望打开ListAllDevices页面。到达那里后，我将扫描一些设备，然后单击以连接到其中一个设备，它将带我到DeviceData页面。稍后，当我单击DeviceData页面中的一个按钮时，它将带我进入DeviceSettings页面中的一个。

  • 反应流：我想继续监听蓝牙状态，如果禁用了该状态，则必须删除DeviceData页面的整个堆栈并再次显示ListAllDevices页面（其状态必须与它们相同进入DeviceData页面之前。

到目前为止我做了什么？

互动流程很好：

  • 我有一个存储库，用于将当前连接的设备作为单个值和流存储。当我单击以手动连接到设备或从设备断开连接，并且当流通知我蓝牙被禁用时，其值也会更新。

  • 蓝牙页面的主要小部件是BluetoothTabPage，它只有一个StreamBuilder可以根据所连接设备的值在ListAllDevices和DeviceData之间进行选择。

  • DeviceData页面会在某个时候推送其他页面。

抽象代码：

class BluetoothTabPage extends StatefulWidget {
  const BluetoothTabPage();

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

class _BluetoothTabPageState extends State<BluetoothTabPage> {
  StreamSubscription _bluetoothStateSubscription;

  @override
  void initState() {
    _bluetoothStateSubscription =
        BluetoothManager.instance.bluetoothState().listen((bluetoothState) {
      if (bluetoothState != const BluetoothStateState.enabled()) {
        Repository.I.setConnectedDevice(const None());
      }
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<Option<IDevice>>(
      stream: Repository.I.watchConnectedDevice,initialData: Repository.I.connectedDevice,builder: (_,snapshot) => snapshot.data.fold(
        () => const ListAllDevices(),(_) => const DeviceData(),),);
  }
}

class ListAllDevices extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    connected device = some device;
  }
}

class DeviceData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (appbar action) {
      show DeviceSettings;
    } else if (appbar another action) {
      show AnotherDeviceSettings;
    } else if (appbar action to disconnect) {
      connected device = null;
    }
  }
}

class DeviceSettings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (app bar back arrow) pop to DeviceData;
  }
}

class AnotherDeviceSettings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (app bar back arrow) pop to DeviceData;
  }
}

问题的根源在于反应流：

  • 当我在ListAllDevices页面上执行connected device = some device;时，存储库会更改，StreamBuilder会侦听并显示DeviceData页面。很好！

  • 当我在DeviceData页面上执行connected device = null;时，存储库中的已连接设备发生更改，StreamBuilder会侦听并再次显示ListAllDevices页面。到目前为止一切顺利！

  • 当我导航至DeviceSettings页面并断开蓝牙连接时，什么也没发生，但是我希望该应用程序将我带回到ListAllDevices页面。

  • 另一件事是：如果单击DeviceSettingsPage页面中的应用栏后退按钮，它将按预期显示ListAllDevicesPage页面，这意味着StreamBuilder可以正常工作，只是推送的DeviceSettingsPage未被弹出。

因此，总的问题是：为什么没有弹出它，我该如何实现？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flutter-navigationreactive-programming