前言

StatefulWidget 是Flutter 中的组件，巨型StatefulWidget 也就是大 dart文件，当前要重构的是一个4314 行，74 个方法，那么为什么要拆分这个文件呢，主要是大文件对AI工具不够友好，难以定位和修改功能。

📐 拆分架构模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
┌─────────────────────────────────────────┐
│   StatefulWidget (主页面)               │
│   - 生命周期管理                         │
│   - UI 布局和组合                        │
│   - 协调各个 Manager                     │
│   预计: 800-1000 行                      │
└─────────────────────────────────────────┘
              ↓ 组合
    ┌─────────┴─────────┬─────────────┐
    ↓                   ↓             ↓
┌─────────┐      ┌──────────┐   ┌──────────┐
│Manager 1│      │Manager 2 │   │Manager 3 │
│数据管理 │      │业务逻辑  │   │下载管理  │
│400-500行│      │500-600行 │   │400-500行 │
└─────────┘      └──────────┘   └──────────┘
                       ↓
              ┌────────┴────────┐
              ↓                 ↓
         ┌─────────┐      ┌─────────┐
         │Widget 1 │      │Widget 2 │
         │组件A    │      │组件B    │
         │50-150行 │      │50-150行 │
         └─────────┘      └─────────┘

拆分层次说明

第一层：主页面 (StatefulWidget)

职责:

  • 保留生命周期方法 (initState, dispose, didChangeAppLifecycleState)
  • 保留核心 UI 状态（tab 索引、loading 状态等）
  • 协调各个 Manager 的初始化和销毁
  • 组装 UI 布局（使用 Widget 组件）

第二层：Manager 类（业务逻辑层）

职责:

  • 数据加载和处理
  • 业务逻辑执行
  • 与外部服务交互（API、数据库）
  • 通过回调通知主页面更新 UI

第三层：Widget 组件（UI 层）

职责:

  • 可复用的 UI 组件
  • 纯展示逻辑
  • 通过参数接收数据
  • 通过回调通知用户交互
License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

有问题请留言~