flutter架构项目基础

2026-09-04 15:22:20 +08:00
parent 70967229d0
commit 0c5aee59c0
265 changed files with 35484 additions and 0 deletions
@@ -0,0 +1,99 @@
+# 【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 的配置里——原理与本页一致。