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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(), // 第一个页面
    );
  }
}

// ❷ 第一个页面（积木块1）
class FirstPage extends StatelessWidget {
  @override
  Widget 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 {
  @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget 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, // 清除所有历史路由
    );
  }
}