Flutter 中的路由嵌套：实现多级导航

在 Flutter 中，路由嵌套可以通过 Navigator 和 PageRoute 实现多级导航。通常，你可以在一个页面中嵌入另一个 Navigator，形成嵌套路由结构。使用 Navigator.of(context, rootNavigator: true) 可以访问顶级导航器，而默认的 Navigator.of(context) 则访问当前页面的导航器。通过这种方式，你可以在不同层级之间进行导航，实现复杂的多级导航逻辑。

在 Flutter 中，路由嵌套（Nested Navigation）通常用于实现多级导航，特别是在复杂的应用程序中，你可能需要在不同的屏幕层级之间进行导航。Flutter 提供了 Navigator 和 PageView 等组件来实现路由嵌套。

1. 使用 Navigator 实现路由嵌套

在 Flutter 中，每个 Navigator 都可以管理一个独立的导航栈。你可以在一个页面中嵌入另一个 Navigator，从而实现多级导航。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NestedScreen(),
              ),
            );
          },
          child: Text('Go to Nested Screen'),
        ),
      ),
    );
  }
}

class NestedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Nested Screen')),
      body: Navigator(
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/nested/details':
              return MaterialPageRoute(
                builder: (context) => DetailsScreen(),
              );
            default:
              return MaterialPageRoute(
                builder: (context) => NestedHomeScreen(),
              );
          }
        },
      ),
    );
  }
}

class NestedHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          Navigator.pushNamed(context, '/nested/details');
        },
        child: Text('Go to Details'),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('This is the details screen'),
      ),
    );
  }
}

2. 使用 PageView 实现多级导航

PageView 也可以用于实现多级导航，特别是在需要水平滑动切换页面的场景中。

class PageViewExample extends StatefulWidget {
  @override
  _PageViewExampleState createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageView Example')),
      body: PageView(
        controller: _pageController,
        children: [
          Center(child: Text('Page 1')),
          Center(child: Text('Page 2')),
          Center(child: Text('Page 3')),
        ],
      ),
    );
  }
}

3. 使用 BottomNavigationBar 实现多级导航

BottomNavigationBar 可以用于在不同的页面之间切换，通常与 IndexedStack 或 PageView 结合使用。

class BottomNavigationExample extends StatefulWidget {
  @override
  _BottomNavigationExampleState createState() => _BottomNavigationExampleState();
}

class _BottomNavigationExampleState extends State<BottomNavigationExample> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bottom Navigation Example')),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

总结

在 Flutter 中，路由嵌套可以通过多种方式实现，具体取决于你的应用需求。你可以使用 Navigator 来管理独立的导航栈，使用 PageView 实现水平滑动导航，或者使用 BottomNavigationBar 结合 IndexedStack 来实现底部导航。