颤动嵌套布线
我对Flutter非常陌生，但我来自于这里的一个角度背景。假设我想要为我的应用程序构建一个BaseFrame，并且根据路由，我想要更改该BaseFrame的内部。我不明白这是怎么回事？
在Angular中，它类似于：
'/page-one': PageOne(),
'/page-two': PageTwo(), children: [
'/part-1': Part1(),
'/part-2': Part2(),
];在本例中，如果您导航到/page-two/part-1，那么它将加载PageTwo()，并且它将在您在PageTwo()上指定<app-route></app-route>的任何位置加载Part1()。我不明白如何在Flutter中做到这一点，因为在Flutter中，您的main.dart (在您的MaterialApp构建器中)中似乎只能有一条平面路由。
我能想到的最好的办法是在PageTwo()上有一个变量，并有一种switch语句：
switch (subPage) {
case '/part-1':
return Part1();
case '/part-2':
return Part2();
}但这似乎是一个糟糕的解决方案。你现在还遇到了自己修复动画等问题(因为MaterialApp在这里不会自动帮助你)。
这里有一些关于这方面的东西，但这对于新手来说似乎非常复杂。这真的是正确的/唯一的方法吗：Nesting routes with flutter
回答 2
Stack Overflow用户
发布于 2021-02-23 22:08:24
您可以使用这个包qlevar_router来做类似的事情
您的案例的完整示例
import 'package:flutter/material.dart';
import 'package:qlevar_router/qlevar_router.dart';
void main() {
runApp(MyApp());
}
class AppRoutes {
final routes = <QRouteBase>[
QRoute(
path: '/page-one',
page: (c) => PageOne(),
),
QRoute(
path: '/page-two',
page: (c) => PageTwo(c),
initRoute: '/part-1',
children: [
QRoute(
path: '/part-1',
page: (c) => Part1(),
),
QRoute(
path: '/part-2',
page: (c) => Part2(),
)
])
];
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerDelegate: QR.router(AppRoutes().routes, initRoute: '/page-one'),
routeInformationParser: QR.routeParser(),
);
}
}
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: [
Text('This is page one'),
TextButton(
onPressed: () => QR.to('/page-two/part-1'),
child: Text('To Part 1')),
TextButton(
onPressed: () => QR.to('/page-two/part-2'),
child: Text('To Part 2')),
]),
),
);
}
}
class PageTwo extends StatelessWidget {
final QRouteChild child;
PageTwo(this.child);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: [
Text('This is page one'),
TextButton(onPressed: () => QR.back(), child: Text('Back')),
TextButton(
onPressed: () => QR.to('/page-two/part-1'),
child: Text('To Part 1')),
TextButton(
onPressed: () => QR.to('/page-two/part-2'),
child: Text('To Part 2')),
SizedBox(
width: 500,
height: 500,
child: child.childRouter,
)
]),
),
);
}
}
class Part1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('This is part 1'));
}
}
class Part2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('This is part 2'));
}
}请注意，当您在子part-1和part-2之间导航时，page-tow根本不会更改
Stack Overflow用户
发布于 2019-06-03 01:14:01
你可以使用像TabBar/TabBarView这样的东西来让其他页面在你所在的页面中显示出来。然后，您可以给出一个整数作为PageTwo类的参数，您可以使用该整数来选择最初导航到的页面。这是一种非常简单的方式来做我认为你想做的事情，但是有更多的限制，因为你不会在每个初始页面中有不同的导航器。除非部件页要有自己的导航。如果你想让屏幕有单独的导航器，你可以这样做。这就是CupertinoTabbedScaffold的工作方式(尽管使用CupertinoApps)。这可能是我们要调查的东西。
https://stackoverflow.com/questions/56416930
复制相似问题