100 lines
3.1 KiB
Markdown
100 lines
3.1 KiB
Markdown
# 【Demo】路由导航：应用入口（RouterApp）
|
||
|
||
> 源文件：`lib/pages/demo/router_demo.dart` ｜ 分类：路由
|
||
> 一句话：一个只负责"组装"的入口文件 —— 注册路由表、指定首页。
|
||
|
||
---
|
||
|
||
## 一、这个 Demo 解决什么问题
|
||
|
||
把路由导航 Demo 的三个页面（首页 / 详情页 / 选择器页）组装成一个可运行的应用。
|
||
演示的是**组件化结构 + 命名路由表**：
|
||
|
||
```
|
||
lib/pages/demo/router_demo.dart → 应用入口（只组装，不写页面）
|
||
lib/pages/demo/router_home_page.dart → 首页（三个跳转按钮）
|
||
lib/pages/demo/detail_page.dart → 详情页（接收参数）
|
||
lib/pages/demo/picker_page.dart → 选择器页（pop 带值返回）
|
||
```
|
||
|
||
> 对照 Vue：RouterApp ≈ `main.ts + router/index.ts`；每个页面一个文件 ≈ `views/` 目录。
|
||
|
||
---
|
||
|
||
## 二、怎么运行 / 演示内容
|
||
|
||
```dart
|
||
runApp(const RouterApp());
|
||
```
|
||
|
||
首页三个按钮，演示三种跳转姿势：
|
||
1. push + 构造函数传参；
|
||
2. push 选择器并 **await 接收 pop 返回的结果**；
|
||
3. pushNamed 命名路由 + arguments 传参。
|
||
|
||
---
|
||
|
||
## 三、核心知识点（新手向）
|
||
|
||
### 1. 命名路由表
|
||
```dart
|
||
MaterialApp(
|
||
title: '路由导航 Demo',
|
||
theme: ThemeData(colorSchemeSeed: const Color(0xFF3B82F6)),
|
||
// 命名路由表：name -> 页面构造（详情页在这里注册）
|
||
routes: {
|
||
'/detail': (context) => const DetailPage(),
|
||
},
|
||
home: const RouterHomePage(),
|
||
)
|
||
```
|
||
- 路由名规范：`/xxx` 开头，如 `/detail`、`/user/info`；
|
||
- 注册后才能用 `Navigator.pushNamed(context, '/detail')`；
|
||
- `home` 是应用启动后的第一个页面（相当于 Vue 的默认路由）。
|
||
|
||
### 2. 命名规范
|
||
| 内容 | 规范 |
|
||
|---|---|
|
||
| 文件名 | snake_case（小写下划线）：`router_home_page.dart` |
|
||
| 类名 | PascalCase：`RouterHomePage` |
|
||
| 引入 | 跨文件用 `import` |
|
||
| 文件组织 | **每个公开类一个文件** |
|
||
|
||
---
|
||
|
||
## 四、关键代码剖析
|
||
|
||
```dart
|
||
class RouterApp extends StatelessWidget {
|
||
const RouterApp({super.key});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return MaterialApp(
|
||
title: '路由导航 Demo',
|
||
theme: ThemeData(colorSchemeSeed: const Color(0xFF3B82F6)),
|
||
routes: {
|
||
'/detail': (context) => const DetailPage(),
|
||
},
|
||
home: const RouterHomePage(),
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 五、踩坑记录
|
||
|
||
1. **入口文件只负责组装**，别在里面堆业务代码——页面跳转见 [router_home_page.md](router_home_page.md)；
|
||
2. 命名路由的 `arguments` 是 dynamic，详情页取值要判空强转（见 [detail_page.md](detail_page.md)）；
|
||
3. 真实项目路由更复杂（嵌套/守卫/转场），用 go_router 或 auto_route 包，本项目 demo 用原生 Navigator 讲清原理。
|
||
|
||
---
|
||
|
||
## 六、扩展思考
|
||
|
||
- 三种跳转姿势的详细讲解见 [router_home_page.md](router_home_page.md)；
|
||
- 参数接收的两种方式见 [detail_page.md](detail_page.md)；
|
||
- 真实项目里 MaterialApp 在 `lib/main.dart`，路由表在 `core/router/` 或 go_router 的配置里——原理与本页一致。
|