flutter 从两条不同的始发航线开通航线

在我的应用程序中，我有一个HomePage，显示一些选定的帖子和一个PostListPage。从这两个页面我打开的职位。
我有这个路线结构。

GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => HomePage(),
      routes: [
        GoRoute(
          path: "post/:id",
          builder: (context, state) => // ...
        ),
        GoRoute(
          path: "posts",
          builder: (context, state) => PostListPage()
        )
      ],
    ),
  ],
);

当我用GoRouter.go在主页上打开一个帖子时，它会按预期工作，但是当我从PostListPage打开一个帖子时，后退按钮会路由回HomePage，而它应该路由回PostListPage。
我该怎么办？
我知道我可以使用GoRouter.push代替，但是，在web上，通过push，路由不会反映在URL中，因此，当在PostPage上刷新浏览器时，它会在HomePage上启动应用程序。
我可以使用GoRouter.optionURLReflectsImperativeAPIs选项来避免这个URL问题，但文档说“强烈建议不要将此值设置为true”。

如果你想从主页和帖子列表页面同时拥有一个post/:id路由，你可以在posts下添加一个子路由：

GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => HomePage(),
      routes: [
        GoRoute(
          path: "post/:id",
          builder: (context, state) => // ...
        ),
        GoRoute(
          path: "posts",
          builder: (context, state) => PostListPage(),
          // add this part, and implement the same builder
          routes: [
            GoRoute(
              path: "post/:id",
              builder: (context, state) => // ...
            ),
          ]
        )
      ],
    ),
  ],
);

从主页导航时，用途：

context.go('/post/123')

从文章列表中：

context.go('/posts/post/123')

在此之后，导航返回应该按预期的方式进行。
这是一个可以在DartPad中运行的简单示例：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routerConfig: GoRouter(
          routes: [
            GoRoute(
              path: "/",
              builder: (context, state) => Home(),
              routes: [
                GoRoute(
                  path: "post/:id",
                  builder: (context, state) =>
                      Post(id: state.pathParameters['id']),
                ),
                GoRoute(
                    path: "posts",
                    builder: (context, state) => Posts(),
                    routes: [
                      GoRoute(
                        path: "post/:id",
                        builder: (context, state) =>
                            Post(id: state.pathParameters['id']),
                      )
                    ])
              ],
            ),
          ],
        ),
        theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47),
        ),
        debugShowCheckedModeBanner: false,
      );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(children: [
        Text('Home', style: Theme.of(context).textTheme.displayMedium),
        TextButton(
          child: const Text('Posts'),
          onPressed: () => context.go('/posts'),
        ),
        TextButton(
          child: const Text('Post 123'),
          onPressed: () => context.go('/post/123'),
        ),
        TextButton(
          child: const Text('Post 456'),
          onPressed: () => context.go('/post/456'),
        )
      ]);
}

class Posts extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(children: [
        Text('Posts', style: Theme.of(context).textTheme.displayMedium),
        TextButton(
          child: const Text('Post 123'),
          onPressed: () => context.go('/post/123'),
        ),
        TextButton(
          child: const Text('Post 456'),
          onPressed: () => context.go('/posts/post/456'),
        ),
        TextButton(
          child: const Text('Back'),
          onPressed: () => Navigator.of(context).pop(),
        )
      ]);
}

class Post extends StatelessWidget {
  final String? id;
  const Post({required this.id});
  @override
  Widget build(BuildContext context) => Column(children: [
        Text(
          'Post $id',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        TextButton(
          child: const Text('Back'),
          onPressed: () => Navigator.of(context).pop(),
        )
      ]);
}

flutter 从两条不同的始发航线开通航线

1条答案

相关问题

热门标签

最新问答