第 6 章 路由与导航

6.1 Navigator 基础：页面栈

// 跳转新页面（入栈）
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailPage(id: 42)),
);

// 返回（出栈）；pop 可携带数据回传
Navigator.pop(context);
Navigator.pop(context, '回传给上一页的结果');

// 等待下一页返回的数据
final result = await Navigator.push<String>(
  context,
  MaterialPageRoute(builder: (_) => const PickerPage()),
);

// 替换当前页（登录成功后进首页，禁止返回登录页）
Navigator.pushReplacement(
  context, MaterialPageRoute(builder: (_) => const HomePage()),
);

// 清空栈并跳转（退出登录）
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => const LoginPage()),
  (route) => false,
);

6.2 路由传参与数据回传（完整示例）

class DetailPage extends StatelessWidget {
  const DetailPage({super.key, required this.id});
  final int id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('详情 #$id')),
      body: Center(
        child: FilledButton(
          onPressed: () => Navigator.pop(context, '选中了 $id'),
          child: const Text('选择并返回'),
        ),
      ),
    );
  }
}

6.3 命名路由与 go_router（推荐）

页面超过 5 个后建议用官方维护的 go_router（声明式路由，支持深链、参数、重定向，与 Web/桌面目标天然兼容）：

// pubspec.yaml: go_router: ^15.0.0（以 pub.dev 最新稳定版为准）
final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (_, __) => const HomePage()),
    GoRoute(
      path: '/detail/:id',                      // 路径参数
      builder: (_, state) => DetailPage(id: int.parse(state.pathParameters['id']!)),
    ),
  ],
);

MaterialApp.router(routerConfig: router);
// 跳转：context.go('/detail/42')   context.push('/detail/42') 可返回