在 Flutter 中，页面跳转（路由管理）是常见的交互需求，涉及普通跳转、带参数跳转、返回带参数等场景。以下是几种常见情况及实现方式：
1. 基本页面跳转（无参数）
使用 Navigator.push() 实现页面跳转，Navigator.pop() 返回上一页。

// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(), // 目标页面
  ),
);

// 从新页面返回
Navigator.pop(context);

2. 跳转时传递参数
通过目标页面的构造函数传递参数。
步骤 1：目标页面定义参数接收

class DetailPage extends StatelessWidget {
  final String id;
  final String name;

  // 构造函数接收参数
  const DetailPage({
    super.key,
    required this.id,
    required this.name,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(name)),
      body: Center(child: Text('ID: $id')),
    );
  }
}

步骤 2：跳转时传递参数

// 从首页跳转到详情页并传参
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(
      id: '123',
      name: '示例商品',
    ),
  ),
);

3. 返回时携带参数
使用 Navigator.pop(context, result) 携带返回值，通过 async/await 接收。
步骤 1：在新页面设置返回参数

class EditPage extends StatelessWidget {
  const EditPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('编辑页面')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回时携带参数（例如用户输入的内容）
            Navigator.pop(context, '修改后的内容');
          },
          child: const Text('保存并返回'),
        ),
      ),
    );
  }
}

步骤 2：在原页面接收返回参数

// 跳转并等待返回结果
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const EditPage()),
);

// 处理返回结果（result 为 '修改后的内容'）
if (result != null) {
  print('收到返回值: $result');
}

4. 命名路由跳转（更规范的管理方式）
通过路由表统一管理页面，适合中大型项目。
步骤 1：定义路由表（通常在 main.dart）

// 路由表：键为路由名称，值为构建页面的函数
final Map<String, WidgetBuilder> routes = {
  '/': (context) => const HomePage(),
  '/detail': (context) => const DetailPage(), // 需要参数时需特殊处理
};

步骤 2：配置 MaterialApp

MaterialApp(
  initialRoute: '/', // 初始路由
  routes: routes, // 关联路由表
);

步骤 3：通过命名路由跳转（带参数）

// 跳转到命名路由并传递参数（通过 settings.arguments）
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': '456', 'name': '命名路由示例'}, // 传递参数
);

步骤 4：目标页面接收参数

class DetailPage extends StatelessWidget {
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取命名路由传递的参数
    final Map args = ModalRoute.of(context)!.settings.arguments as Map;
    
    return Scaffold(
      appBar: AppBar(title: Text(args['name'])),
      body: Center(child: Text('ID: ${args['id']}')),
    );
  }
}

5. 路由管理库推荐
对于复杂项目，推荐使用第三方路由管理库简化操作：
auto_route：类型安全的路由生成器，支持参数自动解析
fluro：轻量级路由管理库，支持拦截器、路由别名等
使用示例（auto_route）：

// 定义路由
@MaterialAutoRouter(
  routes: [
    AutoRoute(path: '/', page: HomePage),
    AutoRoute(path: '/detail', page: DetailPage),
  ],
)
class $AppRouter {}

// 跳转（自动生成类型安全的方法）
context.pushRoute(DetailRoute(id: '789', name: 'auto_route示例'));

总结
简单场景：用 MaterialPageRoute 配合构造函数传参
返回参数：用 Navigator.pop(context, result) + await 接收
规范管理：用命名路由或第三方库（auto_route 等）
复杂需求：路由拦截、动画过渡等可通过自定义路由实现
根据项目规模选择合适的方式，小型项目用基础方法即可，大型项目建议使用路由管理库提升可维护性。