标签: flutter-go-router

我正在尝试实现一个底部导航和应用栏已修复的页面。但是，当我按下按钮时，它将转到另一个页面，而无需重新创建应用程序栏和底部导航栏。对于路由，我使用go_router包。

这里有一个使用 Navigator 的答案。但是有什么办法可以使用go_router来实现它吗？

示例页面：

主页示例：

由于 go_router pkg，我遇到部署失败。这里是错误。

[91mTarget dart2js 失败：异常：/root/.pub-cache/hosted/pub.dev/go_router-3.1.1/lib/src/go_router.dart:22:44：步骤 #0 - “docker-build”：错误：“NavigatorObserver”类不能用作 mixin，因为它既不是 mixin 类，也不是 mixin。步骤 #0 - “docker-build”：GoRouter 类使用 NavigatorObserver 扩展 ChangeNotifier

我只从今天开始得到。

任何帮助表示赞赏。

我正在使用 go_*router 在屏幕之间导航，不幸的是，它会导致每次在当前页面和我导航到的页面上重建。在大多数页面上，我从 Firebase 读取文档，这会导致不必要的读取。作为替代方案，我使用导航器来实现页面之间的导航，而无需重建。使用 go_*router 是否可以达到相同的效果？

Navigator.push(context,MaterialPageRoute(builder: (context) => SecondScreen(),); (rebuild on screen2)
context.go("/secondScreen") (rebuilds on screen1 and screen2)

我会使用 Navigator 而不是 go_router。

我有一个 flutter 应用程序，我想向其中添加状态导航。我希望拥有它，以便您可以查看“Foos”列表，然后选择要查看的 Foo。在 Foo 详细信息页面上，我想要有 3 个选项卡，并在这三个选项卡上有状态导航。网址看起来像这样：

• /foo
  • /：ID
    • /页A
    • /页B
    • /页C

我正在按照这个示例合并 go_router 的StatefulShellRoute. 该示例看起来与我想要的一模一样，除了当我使用参数化路由将其添加到我的应用程序时，我收到此错误：

The default location of a StatefulShellBranch cannot be a parameterized route

该错误似乎意味着我无法在参数化的页面上启动有状态分支，但这就是我希望开始带有选项卡的嵌套导航的地方。有没有办法解决这个问题或有其他方法来实现这个目标？

这是我尝试设置的路由器：

final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return MyHomePage();
      },
      routes: [
        GoRoute(
            path: 'foo',
            builder: (BuildContext context, GoRouterState state) {
              return const FooListScreen();
            },
            routes: [
              StatefulShellRoute.indexedStack(
                  builder: (context, state, navigationShell) {
                    return Scaffold(body: …

我已经为bottomNavigationBar实现了go_router statefulShellRoute，以便在flutter应用程序中具有嵌套路由。

但我也有一些页面想要位于 statefulShellRoute 之外（底部导航栏之外），我在 shell 路由列表之外的 GoRouter 中定义了这些路由，但是当我使用 context.push() 导航到它们时，正如预期的那样，我可以仍然可以看到底部导航栏，因为它将新屏幕推送到嵌套导航堆栈上。

如果我使用 context.go()，即使我可以到达该页面并使底部导航栏消失，但由于之前的路线已被替换，所以我现在无法返回。

如何将路线推到底部导航栏外壳之外并且仍然能够返回？

编辑：我解决了。在此处检查来源：https ://github.com/hanskokx/flutter_adaptive_scaffold_example

AdaptiveScaffold 很棒，但由于缺乏文档，我很难弄清楚如何正确构建布局。

这就是我想要实现的目标：

顶行显示宽布局，而底行显示窄布局。在这两种情况下，流程都是：

1. 无导航状态
2. 已选择导航项目
3. 在列表中选择的项目

每个步骤的 URI 如下：

1. /
2. /导航1
3. /导航1/项目2

我已经“接近”这个解决方案，但是当从列表中选择一个项目（构建一个新屏幕，导致列表在第一次单击项目时失去其位置）、在宽和窄之间交换时会出现问题布局（详细信息屏幕要么不会显示在狭窄的布局上，要么在宽布局上取代列表），并且在狭窄的布局中查看详细信息屏幕（路由回列表会成为问题）。

这是路线的示例：

StatefulShellRoute.indexedStack(
  builder: (context, state, navigationShell) {
    final RouteExtras? extras = state.extra as RouteExtras?;
    final String? id = extras?.id;
    final String? subpage = extras?.subpage;

    return AppScaffold(
      navigationShell: navigationShell,
      subpage: subpage,
      id: id,
    );
  },
  branches: <StatefulShellBranch>[
    StatefulShellBranch(
      initialLocation: '/',
      navigatorKey: _navigatorKey,
      routes: [
        GoRoute(
          name: '/',
          path: '/',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: DefaultScreen(),
          ),
          routes: [
            GoRoute(
              name: "nav1", …

我尝试使用 Go Router 学习 flutter 上的导航。如果我点击扫描按钮，它将移动到扫描屏幕。然后如果我返回，它将返回主屏幕。问题是当我再次点击扫描按钮时，屏幕不会移动到扫描屏幕。视频（https://drive.google.com/file/d/1PuyxdDOeAxs8tvf0kvReJ1DSVOPyrp5N/view?usp=share_link）

这是我的代码：

主程序.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:go_router/go_router.dart';
import 'package:lestari/Pages/scanpage.dart';

import 'Pages/homepage.dart';
import 'Pages/loginpage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    GoRouter router = GoRouter(
      routes: [
        GoRoute(
          path: "/",
          name: "home",
          builder: (context, state) => const HomePage(),
          routes: [
            GoRoute(
              path: "scan",
              name: "scan",
              builder: (context, state) => const ScanPage(),
            ) …

https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/others/custom_stateful_shell_route.dart 在此代码中，即使显示详细信息，ButtomBar 也始终显示。但是，我想在查看“a/details”时隐藏ButtomBar。有没有办法做到这一点？

一种可能的方法是使用navigationShell.shellRouteContext.routerState.matchedLocation.contains('details'). 但我认为应该有一个更简单的方法。这应该怎么做呢？

具体来说，我想根据下一节中当前显示的页面来确定是否启用或禁用按钮栏。

class ScaffoldWithNavBar extends StatelessWidget {
  const ScaffoldWithNavBar({
    required this.navigationShell,
    required this.children,
    Key? key,
  }) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));

  final StatefulNavigationShell navigationShell;

  /// ([AnimatedBranchContainer]).
  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBranchContainer(
        currentIndex: navigationShell.currentIndex,
        children: children,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
        ],
        currentIndex: navigationShell.currentIndex,
        onTap: (int index) => _onTap(context, index),
      ),
    );
  }

我在 flutter 上使用 go_router，并且有一个根路由和一个 shell 路由，其中​​所有子路由上都包含一个底部导航栏。我想推送一个位于 shell 路由之外的页面，并且我希望将其推送到根导航器上，因为它必须位于底部导航栏上方。

我已经检查了无数的 go_router 文档，但没有选项可以做到这一点。

我已经实现了一种方法来删除所有路由并在根导航器上推送页面，但是当弹出该页面时，它会转到一个空页面。但我希望它转到 shell 路由上的页面时所在的位置。

我有我的路由的配置类，我通过模块使用它，如下代码所示：

class RouterRegister {
  static RouterRegister? _instance;

  static RouterRegister getIntance() {
    return _instance ??= RouterRegister();
  }

  final RouterConfig<Object> router = GoRouter(
    navigatorKey: GlobalKey<NavigatorState>(),
    initialLocation: '/',
    observers: [
      FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance)
    ],
    routes: <RouteBase>[
      ShellRoute(
        builder: (context, __, child) => child,
        
        routes: [
          ...MicroAuthRoutes.getIntance().routes,
        ],
      )
    ],
  );
}

我的 MicroAuthRoutes 类是这样的：

class MicroAuthRoutes {
  static const splash = '/';
  static const login = '/login';
  static const forgot = '/forgot';
  static const signup = '/signup';
  static const token = '/token';

  static MicroAuthRoutes? …