Flutter 中的路由嵌套结构：实现多级导航与跳转

使用NestedNavigator或自定义路由管理实现。

更多关于Flutter 中的路由嵌套结构：实现多级导航与跳转的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在 Flutter 中，使用 Navigator 进行路由管理，可通过 Navigator.push 和 Navigator.pop 实现多级导航与跳转。嵌套结构可通过 Navigator 的 onGenerateRoute 或 PageView 实现复杂导航逻辑。

bupafengyu 3楼

在 Flutter 中，路由嵌套结构通过 Navigator 和 MaterialApp 的 routes 或 onGenerateRoute 实现。你可以通过 Navigator.push 或 Navigator.pushNamed 进行页面跳转，使用 Navigator.pop 返回上一级。嵌套路由可以通过在子页面中再创建一个 Navigator 来实现多级导航。例如，使用 MaterialPageRoute 定义路由，并在子页面中创建新的 Navigator 来处理更深层次的导航逻辑。

itying888 4楼

使用NestedNavigator或自定义路由包装器来实现。

zlyuanteng 5楼

在 Flutter 中，路由嵌套结构是实现多级导航与跳转的常见方式。通过合理设计路由结构，可以实现复杂的页面跳转和导航逻辑。以下是实现多级导航与跳转的基本步骤和示例：

1. 基本路由设置

首先，定义应用的主路由和子路由。MaterialApp 的 routes 属性用于配置路由表。

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/page1': (context) => Page1(),
    '/page1/page2': (context) => Page2(),
  },
);

2. 嵌套路由

在 Flutter 中，可以使用 Navigator 来实现嵌套路由。嵌套路由允许在一个页面中定义一个新的导航栈，从而实现多级导航。

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/page1/page2');
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to Page 1'),
        ),
      ),
    );
  }
}

3. 使用 `Navigator` 实现多级导航

在嵌套路由中，Navigator 可以管理不同层级的导航栈。例如，在 Page1 中定义一个嵌套的 Navigator，并在其中管理子页面的导航。

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) {
            return Scaffold(
              appBar: AppBar(title: Text('Page 1')),
              body: Center(
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/page1/page2');
                  },
                  child: Text('Go to Page 2'),
                ),
              ),
            );
          },
        );
      },
    );
  }
}

4. 返回上一级页面

使用 Navigator.pop(context) 可以返回上一级页面。在嵌套路由中，pop 会关闭当前导航栈中的页面。

Navigator.pop(context);

5. 处理路由参数

可以通过 ModalRoute.of(context)!.settings.arguments 来传递和接收路由参数。

Navigator.pushNamed(
  context,
  '/page1/page2',
  arguments: {'key': 'value'},
);

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    return Scaffold(
      appBar: AppBar(title: Text('Page 2')),
      body: Center(
        child: Text('Received argument: ${args['key']}'),
      ),
    );
  }
}