在颤动中使用来自不同小部件的命名导航器？

Posted 2023-02-23

【中文标题】在颤动中使用来自不同小部件的命名导航器？

【英文标题】：Using named Navigator from different widgets in flutter?

【发布时间】：2020-09-19 20:52:16

【问题描述】：

我需要使用来自另一个小部件（屏幕）的命名导航来导航到一个小部件（屏幕）。这是MyHomePageWidget 的正文

body: Navigator(
  key: _navigatorKey,
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) 
    WidgetBuilder builder;

    switch (settings.name) 
      case '/':
        builder = (BuildContext context) => UIHomePage();
        break;
      case '/cart':
        builder = (BuildContext context) => UICartPage();
        break;
      case '/account':
        builder = (BuildContext context) => UIAccountPage();
        break;
      default:
        throw Exception('Invalid route: $settings.name');
    

    return MaterialPageRoute(builder: builder, settings: settings, );
  ,
),

我可以在bottomNavigationBar 和_navigatorKey.currentState.pushNamed(routeNames[tabItem]) 之间切换这些PageRoutes，其中routeNames 是字符串列表['/', '/cart', '/account']。这很好用。

现在，从 UIAccountPage()，我有一个名为“Cart”的 ListTile，我希望在点击该特定图块时导航到 UICartPage。我还希望使用其他几个图块导航到其他小部件（屏幕）。

要实现这一点，我是否必须在 MyHomePage 中扩展 onGenerateRoute 以适应其他路线，或者我必须在某处创建另一个自定义导航器？我很矛盾。如果有人可以用一个简单的插图来指导，那就太棒了。

谢谢

编辑：我也不知道 setting 在 Navigator 中做了什么，而 _navigatorKey 是 final _navigatorKey = GlobalKey<NavigatorState>()

【参考方案1】：

我是使用 Flutter 的新手，但我的这个实现适用于路由。

class Main extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Temp Detector',
      initialRoute: '/',
      routes: 
        '/': (context) => AuthScreen(),
        '/register': (context) => SignInScreen(),
        '/login': (context) => LoginScreen(),
        '/home': (context) => HomeScreen(),
        '/config': (context) => ConfigScreen(),
      ,
    );
  

当我尝试转到另一个视图时，我使用：

Navigator.pushReplacementNamed(context, '/home');

其中第二个参数是路由中定义的名称。

希望对你有所帮助！

【讨论】：

我的做法和你一样，我认为这就是他的答案

我应该把它放在一个文件中的一个单独的类中，然后将它包含在任何地方，我需要实现导航。此外，如果/config 中有子级视图（页面），则说您有配置 -> 语言。在配置小部件中，我们必须使用新的导航器。或者我们可以扩展这个现有的。

这将再次绘制底部导航栏

【参考方案2】：

1，我认为您应该尝试 BottomNavigationBar 与 PageView 或 TabView。

2，对于您的问题，您可以尝试为 UIAccountPage 创建回调选项：

  case '/account':
    builder = (BuildContext context) => UIAccountPage(onTapCart: () 
      _navigatorKey.currentState.pushNamed('/cart');
    );
    break;

还有 UIAccountPage

class UIAccountPage extends StatelessWidget 

  VoidCallback onTapCart;

  UIAccountPage(this.onTapCart);

  @override
  Widget build(BuildContext context) 
    .....
  

【讨论】：

这样做的问题是，从这些网页浏览导航到其他视图会在底部导航栏上绘制