标签: flutter-go-router

WillPopScope(
 onWillPop: () async {
 log('WillPopScope: working in call');
  return new Future(() => true);
 }
 child: Scaffold()
)

我正在使用 go_router 在 Web 页面中导航。这里的 onWillPop 似乎从未被调用过。当在 WEB 上按下后退按钮时，我们如何监听。

我正在使用 go_router 包，因为我需要它提供的深层链接。我将动画过渡应用于某些路线，但它们是静态的，因此每次我转到该路线时，都会触发相同的动画。当我这样做时我想改变动画GoRouter.of(context).go('/inbox')

这就是我现在所拥有的：

final router = GoRouter(
  initialLocation: '/inbox',
  routes: <GoRoute>[
    GoRoute(
      path: '/inbox',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromRight(
          myChildWidget: Layout(
            context: context,
            state: state,
            child: EmailPage(),
          ),
          state: state,
        );
      },
    ),
    GoRoute(
      path: '/email/inbox/:id',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromLeft(
          myChildWidget: Layout(
            context: context,
            state: state,
            child: const EmailDetailsPage(),
          ),
          state: state,
        );
      },
    ),
    GoRoute(
      path: '/menu',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromRight(
          myChildWidget: Layout(
            context: context,
            state: …

我正在开发一个 Web/桌面应用程序，它具有相当标准的 UI 布局，包括NavigationRail左侧的 和占据屏幕其余部分的内容窗格。

我最近添加了这样的内容go_router，这样我就可以在网络浏览器中正确支持 URL，但是这样做时，我在页面之间移动时失去了任何形式的过渡/动画的能力，因为调用会context.go()导致硬切到下一页。

还有一个问题是，go_router路由必须返回要呈现的完整页面，这意味着我需要在每个页面上包含导航栏，而不是每个页面只是与该页面相关的内容。我相信这也是所有动画被破坏的主要原因，因为单击链接会有效地破坏当前的导航栏并为新页面构建新的导航栏

我看不到任何内容go_router，但是否有任何形式的构建器 API 可以输出和刷新页面的单个部分？我正在考虑类似bloc's 的东西BlocBuilder，它侦听状态更改并仅在发生更改时重建其负责的小部件。

或者，有没有办法在不重建整个页面的情况下更新当前 URL？

或者go_router只是无法实现我所追求的目标，如果是这样，是否有其他替代方案可以做到这一点？

我所追求的整体效果类似于材料网站https://m3.material.io/develop 单击各个按钮感觉就像您在应用程序中导航，而不是单击链接并加载新页面

感谢您的帮助

我怎样才能正确重定向到路线？

我的应用程序必须具有一定的路由安全性，我尝试使用 GoRouter\n 来做到这一点，但它总是执行一次重定向并总是返回到主页。

只有 3 条安全路径（个人资料、订单、收藏夹），如果您尚未登录，则必须返回登录。

但是当我将 3 个路由中的任何一个放入 url 时，它会将我重定向到登录名并立即到主页（这是不应该发生的情况）

有人可以帮助我吗？\n我多次改变了逻辑，但我总是回到同一点。

class AppRouter {\n  final SessionCubit sessionCubit;\n\n  GoRouter get router => _goRouter;\n\n  AppRouter(this.sessionCubit);\n\n  late final GoRouter _goRouter = GoRouter(\n    refreshListenable: GoRouterRefreshStream(sessionCubit.stream),\n    initialLocation: APP_PAGE.home.toPath,\n    routes: <GoRoute>[\n      GoRoute(\n        path: APP_PAGE.home.toPath,\n        name: APP_PAGE.home.toName,\n        builder: (context, state) => MyHomePage(),\n      ),\n      GoRoute(\n        path: APP_PAGE.login.toPath,\n        name: APP_PAGE.login.toName,\n        builder: (context, state) => const LoginPage(),\n      ),\n      GoRoute(\n        path: APP_PAGE.profile.toPath,\n        name: APP_PAGE.profile.toName,\n        builder: (context, state) => MyProfile(),\n      ),\n      GoRoute(\n        path: APP_PAGE.page1.toPath,\n        name: …

我一直在阅读 Go Router 与 Riverpod 的最新实现，但不知道如何使用 Firebase 身份验证流，而且我不知道是否需要使用刷新监听。

https://github.com/lucavenir/go_router_riverpod/tree/master/complete_example

所以我最近在我的应用程序中切换到 Go router，因为它非常容易实现。但我在从启动屏幕转移到登录屏幕时遇到问题。我的启动屏幕中有逻辑，我可以检查用户是否登录。根据用户的身份验证，屏幕将转到登录屏幕或主页。

这是启动画面。

    class SplashScreen extends StatefulWidget {
  static const routeName = "/SplashScreen";

  const SplashScreen({Key? key}) : super(key: key);

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

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<AuthenticationBloc, AuthenticationState>(
      listener: (context, state) {
        if (kDebugMode) {
          print('Listener: $state');
        }
        Future.delayed(const Duration(seconds: 3), () {
          if (state.authStatus == AuthStatus.unAuthenticated) {
            GoRouter.of(context).go('/login');

            Navigator.pushNamed(context, SignUpScreen.routeName);
          } else if (state.authStatus == AuthStatus.authenticated) {
            //Navigator.popUntil(context, (route) => route.isFirst);
            Navigator.pushReplacementNamed(context, HomePage.routeName);
          }
        });
      }, …

我正在我的网络应用程序中通过 go router 进行导航。但我在更改屏幕时遇到的问题是，当我第一次打开特定屏幕时，它会使用 InitState() 构建整个屏幕，但在转到另一个屏幕后，我再次单击该屏幕，然后它不会重建（意味着不运行 initState())。我也附上了我的代码片段。

final routerProvider = Provider<GoRouter>((ref) {
  final loggedInState = ref.read(isLoggedInProvider);
  return GoRouter(
    refreshListenable: loggedInState,
    routes: [
      HomeRoute(), // /
      PeopleRoute(), //   /people
      LoginRoute(),
    ],
    redirect: (state) {
      // if the user is not logged in, they need to login
      final loggedIn = loggedInState.value;
      final loggingIn = state.subloc == '/login';
      if (!loggedIn) return loggingIn ? null : '/login';

      // if the user is logged in but still on the login page, send them to
      // …

当我在我的（网络）应用程序中导航时，我得到了这个奇怪的黑色边框。“缩放”动画本身是可取的，但我想摆脱黑色边框。有任何想法吗？

请注意，内容区域下方没有黑色层 - 这看起来像是动画故障。

以下是我的小部件和设置的缩写版本：

class MyScaffold extends StatelessWidget {\n  const MyScaffold({\n    super.key,\n    required this.state,\n    required this.child,\n  });\n\n  final GoRouterState state;\n  final Widget child;\n  \n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: //...,\n      body: AdaptiveLayout( // https://pub.dev/packages/flutter_adaptive_scaffold\n        internalAnimations: false,\n        primaryNavigation: // `NavigationRail` for large screens\n        bottomNavigation: // `NavigationBar` for small screens\n        body: SlotLayout(\n          config: {\n            Breakpoints.smallAndUp: SlotLayout.from(\n              key: PortalScaffold.bodyKey,\n              builder: (_) => Container(\n                clipBehavior: Clip.hardEdge,\n                decoration: const BoxDecoration(),\n                constraints: const BoxConstraints.expand(),\n                child: child,\n              ),\n            ),\n …

根据此博客，如果使用 Navigator 2.0 和/或（在我的情况下）GoRouter，您将无法再使用“WillPopScope”和 onWillPop 函数调用覆盖手机的后退按钮。Navigator 2.0 现在使用 PopRoute 来返回。

这会导致在 flutter 页面上使用 webview 时出现问题。如果用户导航到该 Web 视图中的另一个网页，然后单击手机上的后退按钮，他们自然会期望 Web 视图导航回上一个网页。但相反，它会让用户离开该页面并返回到之前的 flutter 页面。

有没有办法解决？我可以让我的后退按钮首先检查是否有controller.canGoBack()，就像我以前能够在旧的Navigator系统中所做的那样？

我有一条路线/authenticated/page，只有用户登录后才能查看。

go_router 的官方重定向示例展示了如何执行此类“登录门”，但它重定向到/.

重定向（例如登录）后如何恢复导航？IE：

/\xe2\x86\x92 单击链接到/authenticated/page\xe2\x86\x92 被登录页面阻止 \xe2\x86\x92 成功登录 \xe2\x86\x92 打开/authenticated/page