Flutter 定义局部路由 Navigator

Flutter 中，通常我们使用 Navigator 来管理全局的页面路由，在整个应用中维护一个路由堆栈。但是，有些情况下你可能需要一个局部路由，也就是在应用的某个部分内部维护一个独立的路由堆栈，而不影响全局路由。为了实现这一点，你可以在你的应用中创建一个新的 Navigator
局部路由简单使用

1. 代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: AppHome()));
}

class AppHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('局部 Navigator 示例')),
      body: Container(
        // 给局部路由设置一个唯一的 key
        child: Navigator(
          key: GlobalKey<NavigatorState>(),
          // 定义局部路由的页面
          onGenerateRoute: (RouteSettings settings) {
            WidgetBuilder builder;
            switch (settings.name) {
              case '/':
                builder = (BuildContext context) => FirstScreen();
                break;
              case '/second':
                builder = (BuildContext context) => SecondScreen();
                break;
              default:
                throw Exception('Invalid route: ${settings.name}');
            }
            return MaterialPageRoute(builder: builder, settings: settings);
          },
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('打开第二页'),
        onPressed: () {
          // 使用局部 Navigator 进行页面跳转
          Navigator.of(context).pushNamed('/second');
        },
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: ElevatedButton(
          child: Text('返回第一页'),
          onPressed: () {
            // 使用局部 Navigator 返回到上一页
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

2. 效果

• 第一页效果
  
• 点击第二页效果