如何解决基于流的Flutter反应式导航
上下文
我正在构建一个蓝牙应用程序。此应用程序有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 举报,一经查实,本站将立刻删除。