Question

我对Flutter非常陌生，但来自Angular背景。假设我想为我的应用程序构建一个BaseFrame，并根据路由选择更改该BaseFrame的INSIDE。我不知道这将如何工作？

在Angular中，它将类似于：

'/page-one': PageOne(),
'/page-two': PageTwo(), children: [
    '/part-1': Part1(),
    '/part-2': Part2(),
];

在这种情况下，如果您导航到/page-two/part-1，则它将加载PageTwo()，并且无论您在Part1()上指定了<app-route></app-route>的何处加载PageTwo() 。我不明白在Flutter中如何做到这一点，因为在Flutter中，您似乎只能在main.dart（在MaterialApp构建器中）拥有一条平坦路线

我能想到的最好的事情是在PageTwo()上有一个变量，并有一种switch语句：

switch (subPage) {
   case '/part-1':
       return Part1();
   case '/part-2':
       return Part2();
}

但这似乎是一个糟糕的解决方案。您现在还遇到了自己修复动画等问题（因为MaterialApp不会自动为您提供帮助）。

这是关于此的一些内容，但是对于新手来说，这似乎超级复杂。这真的是正确/唯一的方法吗？ Nesting routes with flutter

Answer 1

你可以使用这个包来做类似的事情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 之间导航时，页面拖曳根本不会改变

Answer 2

您可以使用TabBar / TabBarView之类的东西在您所在的页面中显示其他页面。然后，您可以提供一个整数作为PageTwo类的参数，您可以使用该整数选择最初导航到的页面。这是做我想做的事情的一种非常简单的方法，但是由于在这些初始页面的每个页面中没有不同的导航器，因此受到的限制更大。除非“零件”页面具有自己的导航。如果要为屏幕使用单独的导航器，则可以执行此操作。这就是CupertinoTabbedScaffold的工作方式（尽管使用CupertinoApps）。可能需要研究一下。

颤振嵌套路由

2 个答案: