flutter软件开发笔记15-路由与导航
在 Flutter 3 中，路由（Route）和导航（Navigation） 是管理页面跳转和页面堆栈的核心机制。它们允许开发者构建多页面应用，并在不同页面之间进行跳转、传参和状态管理。
一、路由（Route）和导航（Navigation）
1. 路由（Route）
o 表示应用中的一个“页面”或“屏幕”，本质是一个 Widget（如 MaterialPageRoute 或 CupertinoPageRoute）。
o 每个路由对应一个页面，Flutter 通过路由堆栈（后进先出）管理页面跳转。
2. 导航（Navigation）
o 通过 Navigator 类操作路由堆栈，实现页面的跳转（如打开新页面、返回上一页）。
二、路由与导航的核心用途
1. 页面跳转管理
o 实现页面之间的正向跳转（如从主页跳转到详情页）和逆向返回（如从详情页返回主页）。
2. 传递数据
o 在页面跳转时传递参数（如用户ID、配置信息）。
3. 页面堆栈控制
o 管理路由堆栈，避免内存泄漏（如清除无用页面）。
4. 动态路由
o 根据条件动态加载不同页面（如权限验证、AB测试）。
5. 动画效果
o 自定义页面切换的过渡动画（如渐隐、滑动、缩放）。
三 程序界面
四 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Routing Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
const FirstPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 导航到第二个页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondPage()),
);
},
child: const Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 返回上一个页面
Navigator.pop(context);
},
child: const Text('Go back to First Page'),
),
),
);
}
} 五 代码解释
- main 函数：这是应用的入口函数，调用 runApp 函数来启动应用，并传入 MyApp 组件。
- MyApp 组件：这是应用的根组件，使用 MaterialApp 来构建应用的基本结构。home 属性指定了应用启动时显示的第一个页面，这里是 FirstPage。
- FirstPage 组件：这是第一个页面，包含一个按钮。点击按钮时，使用 Navigator.push 方法将 SecondPage 路由压入导航栈，从而跳转到第二个页面。
- SecondPage 组件：这是第二个页面，同样包含一个按钮。点击按钮时，使用 Navigator.pop 方法将当前路由从导航栈中弹出，从而返回上一个页面。