如何使用抽屉在两个页面之间导航?

Question

我对Flutter相当陌生，我正试图获得一些简单的功能工作，但我遇到了麻烦。

我希望能够使用Drawer在两个页面之间导航。我可以从主页导航到另一个屏幕，但是我不能导航回来。

应用程序在firstPage上启动。当我打开"抽屉"时，我点击"第二"选择。这将应用程序导航到secondPage。但是一旦在secondPage上，如果我再次打开抽屉并单击"第一"，我就不会导航回firstPage。

我创建了一个小应用程序来演示这一点:

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

class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
routeInformationParser: const RoutemasterParser(),
);
}
}

final routes = RouteMap(
routes: {
'/':(route) => const MaterialPage(
key: ValueKey('first'),
child: firstPage,
),
'/second':(route) => const MaterialPage(
key: ValueKey('second'),
child: secondPage,
),
},
);

const firstPage = AppPage(
title: Text('First'),
body: Text('First'),
color: Colors.purple
);

const secondPage = AppPage(
title: Text('Second'),
body: Text('Second'),
color: Colors.green
);

class AppPage extends StatelessWidget {
final Text title;
final Text body;
final Color color;
const AppPage({
super.key,
required this.title,
required this.body,
required this.color
});
@override
Widget build (BuildContext context) {
return Scaffold(
drawer: Drawer(
child: ListView(
children: [
ListTile(
title: const Text('First'),
onTap: () => Routemaster.of(context).push('/'),
),
ListTile(
title: const Text('Second'),
onTap: () => Routemaster.of(context).push('/second'),
),
],
),
),
appBar: AppBar(
title: title,
),
body: Container(
decoration: BoxDecoration(color: color),
child: Center(child: body),
),
);
}
}

为了方便，我还创建了一个链接:https://pastebin.com/PRYtwSeU

当我点击"First"项，我应该被带到firstPage页。

当我点击"Second"项，我应该被带到secondPage页。

我试过使用Navigator.pop()和Routemaster.of(context).pop()，但都不起作用。

有人能帮助我了解如何解决这个问题，所以我能够使用抽屉在两个页面之间导航吗?

Answer 1

要导航回第一页，您可以使用popUntil:

onTap: () => Routemaster.of(context).popUntil(
(route) => route.path == '/first',
),

使用你的例子:

import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
routeInformationParser: const RoutemasterParser(),
);
}
}
final routes = RouteMap(
routes: {
'/': (route) => const MaterialPage(
key: ValueKey('first'),
child: firstPage,
),
'/second': (route) => const MaterialPage(
key: ValueKey('second'),
child: secondPage,
),
},
);
const firstPage =
AppPage(title: Text('First'), body: Text('First'), color: Colors.purple);
const secondPage =
AppPage(title: Text('Second'), body: Text('Second'), color: Colors.green);
class AppPage extends StatelessWidget {
final Text title;
final Text body;
final Color color;
const AppPage(
{super.key,
required this.title,
required this.body,
required this.color});
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: ListView(
children: [
ListTile(
title: const Text('First'),
onTap: () => Routemaster.of(context).popUntil(
//direction from right to left
(route) => route.path == '/first',
),
),
ListTile(
title: const Text('Second'),
onTap: () => Routemaster.of(context).push('/second'),
),
],
),
),
appBar: AppBar(
title: title,
),
body: Container(
decoration: BoxDecoration(color: color),
child: Center(child: body),
),
);
}
}