首页 > 解决方案 > 根据 Flutter 中的 Provider 值变化在屏幕之间导航

问题描述

我有一个带有 BLE 通信的颤振应用程序。我已将与 BLE 相关的变量和函数放在 Provider 类中。我的屏幕结构如下:

Home -> ModeSelect -> NormalMode -> NormalDataShow

                   |

                   -> CustomMode -> CustomModeShow

我们控制的设备也有按钮。因此,每当用户按下按钮时,BLE 数据都应该被丢弃,应用程序应该进入 ModeSelect 屏幕。

因此,例如,如果我们在 NormalDataShow 或 CustomMode 屏幕中,并且用户按下按钮,这些屏幕应该关闭并且应用程序必须自动返回到 ModeSelect。

每次用户按下按钮时,设备都会发送一个数据包。我目前收到了这个数据包,并且可以在 Provider 类中处理它的值变化。

我的问题是:发生此类事件后如何在屏幕之间导航?

我已经尝试过了,但一切都搞砸了,_断言失败:第 1995 行第 12 行:'!发生debugLocked'错误:

@override
  Widget build(BuildContext context) {
    final _bleProvider = Provider.of<BLEProvider>(context, listen: true);
    if (_bleProvider.modeChanged == true) {
      _bleProvider.modeChanged = false;
      _bleProvider.resetScore();
  
      Navigator.of(context).popAndPushNamed('mode');
      return Container();
    } else
      return ... // The page main scaffold

标签: flutterflutter-providerflutter-navigation

解决方案


我会采用类似于Flutter 团队的BottomNavigationBar 示例的方法。

基本上,有一个根据您的提供者的价值Scaffold改变其属性(主要)的单一。body

例如:

enum Page { a, b ,c }

/// This is the private State class that goes with MyStatefulWidget.
class BleApp extends StatelessWidget {
  final Map<Page, Widget> _widgets = {
    Page.a: Text('a'),
    Page.b: Text('b'),
    Page.c: Text('c'),
  };
  
  @override
  Widget build(BuildContext context) {
    final _bleProvider = Provider.of<BLEProvider>(context, listen: true);
    // Determine what page to show
    final page = Page.a;
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('BLE App'),
      ),
      body: _widgets[page],
    );
  }
}

这是一个简化的示例,但应该可以帮助您入门。


推荐阅读