Flutter for OpenHarmony：基于Flutter框架的洗衣流程规划器场景化交互设计

Flutter for OpenHarmony：基于Flutter框架的洗衣流程规划器场景化交互设计

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

发布时间：2026年2月9日
技术栈 ：Flutter 3.22+、Dart 3.4+、DropdownMenu、Chip、状态驱动 UI
项目类型 ：生活效率工具 / 家务规划 / 教育级表单与流程管理
适用读者：Flutter 开发者、产品设计师、家庭用户、对"家务数字化"有探索兴趣的人

---

引言：在琐碎中寻找秩序------家务也可以很优雅

洗衣，是现代家庭中最平凡却最复杂的日常任务之一。深色与浅色要分开、羊毛需冷水、牛仔裤忌柔顺剂、羽绒服脱水要低速......稍有不慎，衣物缩水、串色、起球便接踵而至。

《衣序》（LaundryFlow）正是对这一痛点的数字化回应：一个专注、结构化、无设备依赖 的洗衣流程规划器。它不连接洗衣机，不控制硬件，甚至不保存历史------但它通过批次化管理 + 参数引导 + 流程推进，将混乱的洗衣决策转化为清晰、可执行的步骤序列。

本文将深入剖析其五大核心维度：

1. 领域建模：如何抽象"洗衣批次"的关键属性？
2. 表单设计：DropdownMenu 与 Switch 的组合实践
3. 流程状态机：从"待开始"到"完成"的线性推进
4. 视觉反馈系统：Chip 标签与高亮卡片的语义编码
5. 诚实的产品边界：为何不连接真实洗衣机？

并探讨如何在零外部依赖 的前提下，打造一个兼具实用性与教学价值的微型家务助手。

---

一、领域建模：洗衣批次的核心参数抽象

1.1 数据模型设计

class LaundryBatch {
  final String id;
  final String name;        // 用户自定义名称（如"牛仔裤"）
  final String category;    // 分类描述（如"深色牛仔"）
  final int waterTemp;      // 水温（°C）
  final bool useSoftener;   // 是否使用柔顺剂
  final String spinLevel;   // 脱水强度（"低/中/高"）
}

建模原则：

• 用户语言优先 ：name 和 category 使用自然语言，而非技术术语
• 参数最小集 ：仅保留影响洗涤结果的关键变量，避免信息过载
• 合理默认值 ：
  • 水温：30°C（适合多数材质）
  • 柔顺剂：false（非必需，且部分材质禁用）
  • 脱水："中"（平衡效率与损伤）

🧺 领域驱动设计（DDD）的微型实践 ：

好的模型不是技术堆砌，而是对现实问题的精准映射。

---

二、表单交互：结构化输入的用户体验

2.1 多控件协同表单

AlertDialog(
  content: Column(
    children: [
      TextField(...), // 名称
      TextField(...), // 分类
      DropdownMenu<int>(...), // 水温
      Switch(...),           // 柔顺剂
      DropdownMenu<String>(...), // 脱水
    ],
  ),
)

控件选型逻辑：

参数	控件	理由
名称/分类	TextField	自由文本，支持个性化描述
水温	DropdownMenu<int>	有限选项（30/40/60°C），防止无效输入
柔顺剂	Switch	二元选择，操作直观
脱水	DropdownMenu<String>	枚举值（低/中/高），符合洗衣机面板

2.2 输入状态管理

int _tempInput = 30;
bool _softenerInput = false;
String _spinInput = '中';

// 在 setState 中更新
onSelected: (value) => setState(() => _tempInput = value!),

• 局部状态隔离：对话框内的输入独立于主列表，避免副作用
• 即时反馈：用户选择后立即更新 UI，无需"预览"

✍️ 表单即对话 ：

每个控件都在问一个问题："这件衣服该怎么洗？"

---

三、流程引擎：线性推进的状态机

3.1 核心状态

int _currentBatchIndex = -1; // -1 表示未开始
bool _isRunning = false;

状态流转：

点击"开始"
点击"完成此批"
否
是
重置
空闲
运行中: 批次0
是否最后一批?
运行中: 批次1
完成

3.2 关键方法

void _nextBatch() {
  if (_currentBatchIndex < _batches.length - 1) {
    _currentBatchIndex++; // 进入下一批
  } else {
    _finish(); // 全部完成
  }
}

• 线性不可逆：流程只能向前，符合物理世界逻辑（洗过的衣服不能"退回"）
• 完成激励 ：SnackBar 提供正向反馈（✅ 所有衣物已安排洗涤！）

🔄 流程即仪式 ：

每一步确认，都是对家务的尊重。

---

四、视觉反馈：语义化 UI 的构建

4.1 当前批次高亮

color: isActive 
  ? Theme.of(context).colorScheme.primary.withValues(alpha: 0.15) 
  : null,

• 背景着色：当前批次卡片轻微着色，一眼识别
• 绿色播放图标 ：Icons.play_circle 明确指示进行中

4.2 参数标签化展示

Wrap(
  children: [
    Chip(label: Text('${batch.waterTemp}°C')),
    Chip(label: Text(batch.useSoftener ? '加柔顺剂' : '不加柔顺剂')),
    Chip(label: Text('脱水：${batch.spinLevel}')),
  ],
)

Chip 设计优势：

• 紧凑信息密度：在有限空间内展示多维参数
• 视觉分组：每个 Chip 是一个独立决策单元
• 主题自适应：自动适配亮/暗色模式

🏷️ 标签即说明书 ：

用户无需记忆，参数就在眼前。

---

五、工程亮点与最佳实践

5.1 安全删除逻辑

void _deleteBatch(int index) {
  if (_isRunning && _currentBatchIndex >= index) {
    if (_currentBatchIndex == index && _batches.isEmpty) {
      _reset();
    } else {
      _currentBatchIndex = _currentBatchIndex > 0 ? _currentBatchIndex - 1 : 0;
    }
  }
}

• 状态保护 ：删除当前或后续批次时，自动调整 _currentBatchIndex
• 边界处理：防止索引越界或空列表异常

5.2 主题一致性

• 色彩系统 ：primaryContainer 用于 AppBar，primary 用于高亮
• 控件规范 ：FilledButton / OutlinedButton 符合 Material 3

5.3 默认数据预设

final List<LaundryBatch> _batches = [
  LaundryBatch(name: '深色T恤', category: '深色棉质', waterTemp: 30, ...),
  ...
];

• 开箱即用：提供常见场景示例，降低学习成本
• 教育价值：暗示合理参数组合（如白衬衫用40°C+柔顺剂）

---

六、诚实设计：为何不连接真实洗衣机？

6.1 技术透明

• 明确告知：底部提示"不连接真实设备"
• 不制造虚假期待：避免用户误以为可远程启动洗衣机

6.2 场景聚焦

• 规划先行：洗衣前花2分钟规划，比洗错后补救更高效
• 通用性：适用于所有品牌/型号洗衣机，甚至手洗场景

🧠 工具的本质是增强认知，而非替代行动 ：

《衣序》的目标不是自动化洗衣，而是减少决策疲劳。

---

七、进阶演进方向

7.1 功能增强

1. 智能推荐 ：
   • 输入衣物材质，自动推荐参数（如"羊毛 → 30°C, 低脱水"）
2. 多用户协作 ：
   • 家庭成员共享洗衣计划（需网络）
3. 耗材提醒 ：
   • "柔顺剂剩余不足，请补充"

7.2 技术升级

1. 本地持久化 ：

   // 保存常用批次模板
   prefs.setString('templates', jsonEncode(_batches));

2. IoT 集成 （高端场景）：

   • 通过 Home Assistant 发送指令到智能洗衣机

3. 语音输入 ：

   • "添加一批深色牛仔裤，30度，不加柔顺剂"

7.3 设计深化

1. 材质图标库 ：
   • 为"棉"、"羊毛"、"化纤"等分类添加专属图标
2. 时间估算 ：
   • 根据参数计算总耗时（如"预计45分钟"）
3. 环保模式 ：
   • 推荐低温洗涤，显示节水节电数据

---

结语：在数字时代，重新发现家务的尊严

《衣序》是一次对"家务隐形化"的温柔抵抗。它不追求炫技，而是专注于一个被忽视的日常场景：如何让洗衣变得更简单、更可靠、更少焦虑。

在智能家居鼓吹"全自动"的今天，《衣序》证明了：最好的工具，往往不是替代人类，而是增强人类的判断。它没有传感器，没有云同步，甚至没有保存按钮------但它用一个批次列表、一组参数标签、一句"完成此批"，完成了最本质的沟通。

对于开发者而言，这不仅是一个洗衣助手，更是一面镜子------照见我们是否真正理解用户，是否敢于对"加功能"的惯性说不。

"Order and simplification are the first steps toward the mastery of a subject."

------ Thomas Mann

愿你的下一个应用，也能在平凡生活中，为秩序与尊严留一片净土。

---

GitHub Gist 链接 ：laundry_flow_app.dart
适用场景：表单设计教学、状态机实践、Chip 组件应用、家务类 App 原型

🧺 Happy Coding!

让每一行代码，都成为用户轻松生活的一步。