Flutter基础（路由页面跳转）-拓冰建站

基础路由表配置

直接使用 routes 属性定义简单路由（无需传参）：

MaterialApp(initialRoute: '/', // 初始页面routes: {'/': (context) => HomePage(),         // 首页'/detail': (context) => DetailPage(), // 详情页'/profile': (context) => ProfilePage(),},onUnknownRoute: (settings) =>        // 处理未定义路由MaterialPageRoute(builder: (_) => NotFoundPage()),
);

基础跳转实现

在按钮的 onPressed 回调中调用 Navigator.pushNamed，传入当前 context 和注册的路由路径：

// 在 HomePage 的按钮跳转到详情页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/detail'); // 使用命名路由跳转},child: Text('进入详情页'),
);// 在详情页跳转到个人页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/profile');},child: Text('进入个人页'),
);

带参数跳转（高级用法）

若需向目标页面传递数据（如商品ID），需结合 arguments 属性和路由解析：

步骤：

跳转时传递参数：

Navigator.pushNamed(context,'/detail',arguments: {'id': 1001, 'title': '商品详情'}, // 动态数据
);

目标页面接收参数（需修改路由表注册方式）：
使用 onGenerateRoute 替代 routes，解析参数并初始化页面。

MaterialApp(onGenerateRoute: (RouteSettings settings) {switch (settings.name) {case '/detail':final args = settings.arguments as Map<String, dynamic>; // 类型转换return MaterialPageRoute(builder: (_) => DetailPage(id: args['id'], title: args['title']),);// 其他路由...}},
);

下面是一个超简单的 Flutter 页面跳转完整代码，用最基础的方式实现（就像搭积木一样简单！），直接复制就能运行👇

import 'package:flutter/material.dart';void main() => runApp(MyApp()); // 启动App// ❶ 整个App的入口（像游戏的主菜单）
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FirstPage(), // 第一个页面);}
}// ❷ 第一个页面（积木块1）
class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("首页")),body: Center(child: ElevatedButton(onPressed: () {// ➡️ 点击跳转到第二个页面Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()),);},child: Text("去第二页"),),),);}
}// ❸ 第二个页面（积木块2）
class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("第二页")),body: Center(child: ElevatedButton(onPressed: () {// 🔙 点击返回首页Navigator.pop(context);},child: Text("返回首页"),),),);}
}

💡 记住三句话（小学生也能懂！）

// 跳转新页面：
Navigator.push(context, MaterialPageRoute(builder: (context) => 新页面()));// 返回旧页面：
Navigator.pop(context);// 每个页面用Scaffold搭建：
Scaffold(appBar: ..., body: ...)

进阶阶段

🗂️ 项目结构

lib/
├── main.dart              # 应用入口
├── app/                   
│   ├── routes.dart        # 路由管理（核心）
│   └── route_utils.dart   # 路由工具类
├── features/              # 功能模块
│   ├── home/              # 首页模块
│   │   └── home_page.dart 
│   ├── profile/           # 个人资料模块
│   │   └── profile_page.dart
│   └── settings/          # 设置模块
│       └── settings_page.dart
└── widgets/               # 全局通用组件└── custom_button.dart

📄 1. 路由管理文件 (`lib/app/routes.dart`)

import 'package:flutter/material.dart';
import 'package:myapp/features/home/home_page.dart';
import 'package:myapp/features/profile/profile_page.dart';
import 'package:myapp/features/settings/settings_page.dart';class AppRoutes {// 路由表（页面名 → 页面构造器）static Map<String, WidgetBuilder> routes = {'/': (context) => HomePage(),          // 首页路由'/profile': (context) => ProfilePage(), // 个人资料页'/settings': (context) => SettingsPage(),// 设置页};// 全局路由跳转方法static void navigateTo(BuildContext context, String routeName) {Navigator.pushNamed(context, routeName); // 通过路由名跳转}// 带参数跳转（示例）static void navigateWithArgs(BuildContext context, String routeName, Object args) {Navigator.pushNamed( context,routeName,arguments: args, // 传递参数);}
}

🚪 2. 主入口文件 (`lib/main.dart`)

import 'package:flutter/material.dart';
import 'package:myapp/app/routes.dart'; // 导入路由配置void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter路由管理示例',initialRoute: '/', // 初始路由指向首页routes: AppRoutes.routes, // 注入全局路由表// 可选：动态路由处理（如权限校验）onGenerateRoute: (settings) {// 可在此添加登录验证逻辑return MaterialPageRoute(builder: (context) => AppRoutes.routes[settings.name]!(context),settings: settings,);},);}
}

🖼️ 3. 页面文件示例 (`lib/features/home/home_page.dart`)

import 'package:flutter/material.dart';
import 'package:myapp/app/routes.dart'; // 导入路由跳转方法
import 'package:myapp/widgets/custom_button.dart'; // 导入自定义按钮class HomePage extends StatelessWidget {const HomePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("首页")),body: Center(child: Column(children: [CustomButton(text: "跳转到个人资料页",onPressed: () {// 使用路由工具跳转AppRoutes.navigateTo(context, '/profile'); },),CustomButton(text: "带参数跳转到设置页",onPressed: () {AppRoutes.navigateWithArgs(context,'/settings',{"userId": 123}, // 传递参数);},),],),),);}
}

⚙️ 4. 参数接收示例 (`lib/features/settings/settings_page.dart`)

import 'package:flutter/material.dart';class SettingsPage extends StatelessWidget {const SettingsPage({super.key});@overrideWidget build(BuildContext context) {// 获取路由传递的参数final args = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>?;final userId = args?['userId'] ?? '未知用户';return Scaffold(appBar: AppBar(title: const Text("设置页")),body: Center(child: Text("用户ID: $userId"), // 显示参数),);}
}

🧩 5. 路由工具扩展 (`lib/app/route_utils.dart`)

import 'package:flutter/material.dart';class RouteUtils {// 替换当前路由（无返回栈）static void replaceRoute(BuildContext context, String routeName) {Navigator.pushReplacementNamed(context, routeName);}// 返回上一页并带返回值static void popWithResult(BuildContext context, Object result) {Navigator.pop(context, result); // 返回结果给上一个页面}// 清理路由栈并跳转（如登录后跳首页）static void clearStackAndGo(BuildContext context, String routeName) {Navigator.pushNamedAndRemoveUntil(context,routeName,(route) => false, // 清除所有历史路由);}
}