房间收纳方案：鸿蒙AI应用开发实战——AI收纳师，空间焕新颜

一、引言

“东西太多、空间太小、找不到想要的物品”——这是很多人在日常生活中面临的收纳难题。面对杂乱的房间，很多人不知道从何下手：应该买什么收纳工具？物品如何分类？整理步骤是什么？

房间收纳方案 正是为了解决这一痛点而诞生的鸿蒙AI应用。用户只需选择空间类型（卧室/厨房/衣柜/书桌/卫生间）和物品类型（多选），AI即可自动生成一套完整的收纳方案，包括分区规划、收纳工具推荐和整理步骤指南，让收纳变得系统化、可执行。

本文将从应用架构设计、鸿蒙核心技术实现、AI应用亮点等维度，深度剖析这款应用的开发全流程。

---

二、应用架构设计：Model-Service-Page 三层架构

2.1 架构概览

┌─────────────────────────────────────────────────────────┐
│                     Page 层 (UI)                         │
│            StoragePlanPage.ets                           │
│   @State 多选管理 / @Builder 三层卡片 / Flex 胶囊      │
├─────────────────────────────────────────────────────────┤
│                   Service 层 (业务逻辑)                  │
│           StoragePlanService.ets                         │
│   空间方案库 / 工具推荐 / 整理步骤生成                 │
├─────────────────────────────────────────────────────────┤
│                    Model 层 (数据模型)                   │
│           StoragePlanModel.ets                           │
│   Zone / StorageData / SPMMessage / 常量               │
└─────────────────────────────────────────────────────────┘

2.2 Model 层：数据结构定义

核心数据类：

• Zone：收纳分区，包含分区名称和存放内容
• StorageData：完整收纳方案，包含分区列表、工具列表和步骤列表

关键常量：

• SPM_SPACES：5种空间（卧室/厨房/衣柜/书桌/卫生间）
• SPM_ITEMS：8种物品类型（衣物/书籍/化妆品/厨具/药品/数码产品/饰品/杂物）

2.3 Service 层：收纳方案库

Service 层预置了5种空间的完整收纳方案：

getStorage(space: string, items: string[]): StorageData {
    const map: Record<string, StorageData> = {
        '卧室': new StorageData(
            [new Zone('床头区', '台灯、手机充电器、睡前读物、眼罩'),
             new Zone('衣柜区', '按季节分区：当季衣物挂放、过季衣物收纳箱'),
             new Zone('梳妆区', '化妆品分类收纳盒、首饰架、镜子'),
             new Zone('床底区', '换季被褥、不常用物品用扁平收纳箱存放')],
            ['多层收纳柜', '床底扁平收纳箱', '衣柜分隔板', '化妆品旋转收纳架', '墙面挂钩'],
            ['1. 清空房间所有物品', '2. 不用的物品果断断舍离', '3. 按分区规划放置物品', '4. 常用物品放在触手可及的位置']
        ),
        // ... 其他空间方案
    }
}

2.4 Page 层：UI展示

Page 层实现了空间选择、物品多选等交互，以及分区、工具、步骤的三层卡片展示。

---

三、鸿蒙技术深度解析

3.1 @State 多选管理

物品类型选择支持多选，使用数组管理选中状态：

@State selectedSpace: string = ''          // 选中的空间
@State selectedItems: string[] = []        // 选中的物品类型（多选）
@State currentData: StorageData | null = null  // 收纳方案结果

多选切换逻辑：

(item: string) => {
    const idx = this.selectedItems.indexOf(item)
    if (idx >= 0) {
        this.selectedItems.splice(idx, 1)  // 取消选中
    } else {
        this.selectedItems.push(item)        // 选中
    }
}

3.2 Flex 多选胶囊（带图标切换）

空间选择使用单选的胶囊组件，物品类型使用多选的胶囊组件，两者共享同一套样式系统：

单选胶囊：

this.buildSection('🏠 选择空间', SPM_SPACES, this.selectedSpace, ...)

多选胶囊：

this.buildMultiSection('📦 物品类型（可多选）', SPM_ITEMS, this.selectedItems, ...)

多选胶囊的样式：

Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
    ForEach(items, (item: string) => {
        Text(item)
            .fontSize(14)
            .fontWeight(selected.indexOf(item) >= 0 ? FontWeight.Bold : FontWeight.Normal)
            .fontColor(selected.indexOf(item) >= 0 ? COLOR_PRIMARY : COLOR_TEXT)
            .backgroundColor(selected.indexOf(item) >= 0 ? COLOR_SELECTED_BG : COLOR_CARD)
            .border({ width: 1, color: selected.indexOf(item) >= 0 ? COLOR_PRIMARY : COLOR_BORDER })
            .onClick(() => { onClick(item) })
    })
}

3.3 @Builder 三层卡片

收纳方案的结果展示采用三层卡片设计，分别展示分区、工具和步骤：

第一层：分区卡片

ForEach(data.zones, (zone: Zone, idx: number) => {
    Column() {
        Row() {
            Text('📌')
            Text(zone.name)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLOR_PRIMARY)
        }
        Text(zone.content)
            .fontSize(13)
            .fontColor(COLOR_TEXT_SEC)
    }
    // 卡片样式
})

第二层：工具卡片

Column() {
    Text('🧰 推荐收纳工具')
    Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(data.tools, (tool: string) => {
            Text(tool)
                .fontColor(COLOR_PRIMARY)
                .backgroundColor(COLOR_SELECTED_BG)
                .borderRadius(12)
        })
    }
}

第三层：步骤卡片

Column() {
    Text('📋 整理步骤')
    ForEach(data.steps, (step: string, idx: number) => {
        Text('${idx + 1}. ${step}')
            .fontColor(COLOR_TEXT_SEC)
    })
}

三层卡片的设计特点：

• 分区卡片使用📌图标，突出分区名称
• 工具卡片使用 Flex 流式布局展示工具标签
• 步骤卡片使用有序列表，步骤清晰

3.4 Scroll 滚动展示

三层卡片的内容可能较多，使用 Scroll 包裹确保完整展示：

if (this.currentData !== null) {
    Scroll() {
        Column() {
            this.buildResultCard(this.currentData)
        }
        .padding({ bottom: 20 })
    }
    .layoutWeight(1)
    .scrollBar(BarState.Off)
}

---

四、AI 应用亮点分析

4.1 5种空间预置方案

应用为5种常见空间预置了完整的收纳方案：

卧室方案：

• 床头区、衣柜区、梳妆区、床底区
• 推荐工具：多层收纳柜、床底扁平收纳箱、衣柜分隔板等

厨房方案：

• 灶台区、水槽区、备菜区、储物区
• 推荐工具：墙面置物架、调料旋转架、水槽沥水架等

衣柜方案：

• 挂放区、叠放区、配件区、鞋区
• 推荐工具：衣架套装、衣物收纳盒、分隔板、鞋盒等

书桌方案：

• 桌面区、抽屉区、书架区、线缆区
• 推荐工具：桌面收纳盒、笔筒、文件架、理线器等

卫生间方案：

• 镜柜区、淋浴区、台面区、柜下区
• 推荐工具：镜柜收纳盒、壁挂置物架、吸盘挂钩等

4.2 8种物品分类

应用支持8种物品类型的多选，用户可以根据实际需求选择需要收纳的物品：

• 衣物、书籍、化妆品、厨具、药品、数码产品、饰品、杂物

4.3 27种收纳工具库

应用内置了27种收纳工具，覆盖不同空间和场景：

• 卧室：多层收纳柜、床底扁平收纳箱、衣柜分隔板、化妆品旋转收纳架、墙面挂钩
• 厨房：墙面置物架、调料旋转架、水槽沥水架、密封罐套装、碗碟架、锅盖架
• 衣柜：衣架套装、衣物收纳盒、分隔板、鞋盒/鞋架、多功能衣架、真空压缩袋
• 书桌：桌面收纳盒、笔筒、文件架、理线器/魔术贴、抽屉分隔格、显示器增高架
• 卫生间：镜柜收纳盒、壁挂置物架、吸盘挂钩、转角收纳架、抽屉分隔盒、吹风机架

---

五、关键技术挑战与解决方案

5.1 挑战一：多选与单选的组件复用

挑战：空间选择为单选，物品类型选择为多选，需要复用同一套UI组件。

解决方案：

• 设计两个独立的 @Builder 方法：buildSection（单选）和 buildMultiSection（多选）
• 两者使用相同的样式系统，仅逻辑判断方式不同
• 单选使用 === 等值比较，多选使用 indexOf 数组索引判断

5.2 挑战二：三层信息的层级展示

挑战：收纳方案包含分区、工具、步骤三个层次的信息，需要清晰区分。

解决方案：

• 使用三张独立的卡片分别展示不同层次的信息
• 每张卡片有独立的标题（📌分区/🧰工具/📋步骤）
• 工具使用流式标签布局，步骤使用有序列表

5.3 挑战三：物品类型与空间方案的关联

挑战：用户选择的物品类型应影响收纳方案的具体内容。

解决方案：

• 当前版本通过空间键值匹配预置方案
• 物品类型参数传递给 Service 层，为未来精细化过滤预留接口
• 预置方案中已考虑了常见物品类型

---

六、用户交互体验设计

6.1 粉色的生活主题

应用采用粉色系配色（#FDF2F8背景、#EC4899主题色），传达温馨、生活的品牌调性。

6.2 清晰的选择流程

1. 选择空间：5种空间类型，单选
2. 选择物品类型：8种物品类型，多选

6.3 三层信息展示

• 分区卡片：展示空间的具体分区规划
• 工具卡片：展示推荐的收纳工具列表
• 步骤卡片：展示整理的步骤指南

---

七、总结

房间收纳方案 应用展示了鸿蒙 ArkTS 在生活服务领域的应用潜力，三个核心技术亮点值得关注：

1. 多选Flex胶囊组件：支持多选和单选的胶囊选择器，同一套样式系统
2. @Builder 三层卡片架构：分区、工具、步骤三层信息的分层展示
3. 5种空间预置方案：覆盖卧室、厨房、衣柜、书桌、卫生间等常见空间

未来展望：未来可以引入3D空间可视化、物品清单管理、收纳进度追踪、AI智能推荐收纳工具购买链接等功能，打造更完整的智能收纳解决方案。