Flutter web + go_router,当直接访问时:/page,如何返回到/(根目录)

mhd8tkvw  于 2023-02-05  发布在  Flutter
关注(0)|答案(2)|浏览(215)

我使用的是go_router,得到了这样的配置:

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Flutter Demo Home Page')),),
    GoRoute(path: '/second', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Second !')),),
  ],
);

当我直接访问Web时使用:/second页面正确打开,但无法返回:/(应用程序栏中没有后退箭头)。
如果我转到/,然后通过以下方式打开/second页面:context.push("/second");,则自然存在反向箭头。
当我在浏览器中直接键入URI时,如何确保应用程序栏后退箭头允许我转到初始页面?
完整示例:

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

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

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Flutter Demo Home Page')),),
    GoRoute(path: '/second', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Second !')),),
  ],
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerConfig: router,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.push("/second");
        },
        tooltip: 'Navigate',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}
piv4azn7

piv4azn71#

对于从应用程序栏返回到根任何地方使用这个:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => const  MyHomePage(title: 'Flutter Demo Home Page')),
            (route) => true);
        },
        tooltip: 'Navigate',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

您可以使用以下代码来支持root:

Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => const  MyHomePage(title: 'Flutter Demo Home Page')),
            (route) => true);
dxxyhpgq

dxxyhpgq2#

解决方案是嵌套路由,例如:

routes: [
    GoRoute(path: '/', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Flutter Demo Home Page')), routes: [
      GoRoute(path: 'second', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Second !'))), 
    ]),
  ],

在这种情况下,当您访问:/second,则/页将位于堆栈上。
可以在不使用Web浏览器的情况下测试“后退箭头”行为,方法是直接转到/second,而不将页面推到堆栈上:context.go("/second");

相关问题