您能解释一下如何使用 Flutter 的内置导航系统创建多级导航层次结构吗？

在 Flutter 中，创建多级导航层次结构主要依赖于 Navigator 组件。Navigator 可以管理应用中页面的堆栈（也称为路由堆栈），并提供了推送（push）和弹出（pop）路由的方法来管理这个堆栈。

基础步骤

1. 定义路由: 在 Flutter 应用中，首先需要定义各个页面（也称为路由）。这通常在 MaterialApp 的 routes 参数中完成，其中每个路由都映射到一个 Widget。

   dart
   MaterialApp(
     // 初始路由
     initialRoute: '/',
     routes: {
       '/': (context) => HomePage(),
       '/second': (context) => SecondPage(),
       '/third': (context) => ThirdPage(),
     },
   );

2. 导航到新页面: 使用 Navigator.pushNamed 方法，可以根据路由名称导航到新页面。

   dart
   // 从当前页面导航到第二页面
   Navigator.pushNamed(context, '/second');

3. 返回上一页面: 使用 Navigator.pop 方法可以返回到堆栈中的上一页面。

   dart
   // 返回到前一个页面
   Navigator.pop(context);

示例：三级导航

假设有三个页面：首页、产品列表和产品详情。用户从首页开始，可以进入产品列表，然后从列表进入产品详情。

dart
// 定义三个页面的 Widget
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: Center(
        child: ElevatedButton(
          child: Text("查看产品列表"),
          onPressed: () {
            Navigator.pushNamed(context, '/products');
          },
        ),
      ),
    );
  }
}

class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("产品列表")),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text("产品 1"),
            onTap: () => Navigator.pushNamed(context, '/details'),
          ),
          ListTile(
            title: Text("产品 2"),
            onTap: () => Navigator.pushNamed(context, '/details'),
          ),
        ],
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("产品详情")),
      body: Center(child: Text("这里是产品详情")),
    );
  }
}

在这个例子中，用户首先看到首页，然后可以跳转到产品列表。在产品列表页面，用户可以选择一个产品查看其详情。

总结

使用 Flutter 的内置导航系统，可以方便地创建和管理多级导航层次结构。通过定义路由、使用 Navigator 的 push 和 pop 方法，可以实现页面间的跳转及返回，从而为用户提供流畅的应用体验。