【发布时间】：2021-09-12 11:23:46
【问题描述】：
我想利用 Flutter 中的嵌套路由。我想除了一件事之外，我还管理了我想要的东西。我的嵌套“主页”路线不会在AppBar 中显示返回导航，但是硬件按钮会让我回到上一条路线。也许我没有正确使用嵌套路由。
我有一个根 MaterialApp，它通过 routes 属性定义主根页面。其中一个根页面是MyChildPage，它呈现另一个Navigator 并使用onGenerateRoute 属性将用户指向其子页面。导航有效，但当我登陆 MyChildPage（标题为“子页面”）时，后退按钮不见了：
代码
您可以在dartpad.dev 上运行交互式示例，代码也可见。
我将所有内容都放在一个文件中：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Nested tutorial',
theme: ThemeData(
primarySwatch: Colors.orange,
),
initialRoute: '/',
routes: {
'/': (_) => MyHomePage(),
'/sub_page': (_) => MySubPage(),
'/child': (_) => MyChildPage(),
});
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello this is home page'),
ElevatedButton(
child: Text('Visit sub page'),
onPressed: () {
Navigator.pushNamed(context, '/sub_page');
}),
OutlinedButton(
child: Text('Visit child page'),
onPressed: () {
Navigator.pushNamed(context, '/child');
}),
],
),
),
);
}
}
class MySubPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home / Sub Page')),
body: Center(child: Text('Hello this is sub page')),
);
}
}
class MyChildPage extends StatefulWidget {
@override
_MyChildPageState createState() => _MyChildPageState();
}
class _MyChildPageState extends State<MyChildPage> {
@override
Widget build(BuildContext context) {
return Navigator(
initialRoute: '/',
onGenerateRoute: (settings) {
switch (settings.name) {
case '/child_1':
return MaterialPageRoute(builder: (_) => MyChildPage1());
case '/child_2':
return MaterialPageRoute(builder: (_) => MyChildPage2());
case '/':
default:
return MaterialPageRoute(builder: (_) => MyChildPageRoot());
}
});
}
}
class MyChildPageRoot extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Child page')),
body: Container(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Center(child: Text('This is child page root ')),
Center(
child: OutlinedButton(
child: Text('Visit sub child page 1'),
onPressed: () {
Navigator.pushNamed(context, '/child_1');
})),
Center(
child: OutlinedButton(
child: Text('Visit sub child page 2'),
onPressed: () {
Navigator.pushNamed(context, '/child_2');
})),
])),
);
}
}
class MyChildPage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Child sub page 1')),
body: Center(child: Text('You are on child sub page #1')),
);
}
}
class MyChildPage2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Child sub page 2')),
body: Center(child: Text('You are on child sub page #2')),
);
}
}
我正在寻找一种解决方案，我仍然可以使用命名路由并且我想保留多个导航器的结构。我不想在我的顶级 MaterialApp 小部件中定义所有路由.
【问题讨论】：
标签： flutter routes nested-routes