鸿蒙 ArkTS 实战：Disaster Supply Cabinet 从防灾物资柜到生活安全工具完整解析

鸿蒙 ArkTS 实战：Disaster Supply Cabinet 从防灾物资柜到生活安全工具完整解析

前言

Disaster Supply Cabinet 是一个基于鸿蒙 ArkTS 与 ArkUI 声明式 UI 实现的生活安全类单页应用，核心场景是家庭防灾物资分层管理。

它把 维护当前柜层、家庭共享状态、物资分类和库存说明 这类日常安全需求，拆成状态字段、数组列表、条件展示、点击交互和即时反馈。

本文基于项目真实的Index.ets源码展开，分析它如何使用@State管理页面数据，如何使用ForEach、Grid、Row、Column、Stack、Toggle、Button等组件构建移动端安全工具界面，以及如何让用户在家庭、出差、账号、隐私和急救场景里快速确认关键状态。

图示说明：配图用于表达鸿蒙应用中状态、组件、条件渲染和事件反馈之间的关系，帮助理解本文的代码拆解。

阅读时可以结合 HarmonyOS 应用开发文档、ArkTS 语言基础、ArkUI 声明式开发范式、组件参考 等资料，快速定位 ArkTS、ArkUI 和组件开发相关知识。

生活安全工具的价值来自清晰、稳定和低操作成本：用户需要马上看到状态、风险和下一步，而不是在复杂流程里寻找入口。

一、项目定位与安全场景

1.1 业务定位

防灾物资柜 聚焦的场景是：维护当前柜层、家庭共享状态、物资分类和库存说明。

这类工具适合家庭安全、出行安全、账号治理、隐私清理、灾备物资和急救信息等轻量场景。

用户打开页面时，需要立刻看到当前状态，并能用最少步骤完成一次确认、选择或记录。

1.2 技术定位

项目采用鸿蒙 ArkTS 单页写法，页面内直接声明状态、数组和交互逻辑。

这种实现方式适合安全工具原型、教学案例和轻量实用工具。

1.3 使用闭环

页面的使用闭环可以概括为四步。

1. 查看当前生活安全状态。
2. 选择列表项、切换开关或点击动作按钮。
3. 触发记录、提醒、确认或展示。
4. 在当前页面看到进度、状态或提示更新。

二、工程结构与入口页面

2.1 页面文件

项目核心逻辑集中在Index.ets。

entry/ src/ main/ ets/ pages/ Index.ets

这个入口页面同时承担状态声明、事件处理和 UI 渲染。

2.2 组件声明

@Entry@Componentstruct Index{build(){// 声明式页面结构}}

这是鸿蒙 ArkUI 页面开发中非常基础的结构。

2.3 单页边界

当前版本没有引入复杂后端，也没有把流程拆成多个页面。

它先把单个安全场景做成清晰可用的一屏工具，再为后续扩展留下空间。

三、状态模型拆解

3.1 状态字段总览

这些字段共同构成了 防灾物资柜 的最小安全模型。

3.2 状态语义

shelf通常代表页面主状态，stock则承载列表、结果、开关或当前反馈。

字段命名贴近安全场景，是这类小工具可维护性的关键。

3.3 核心源码片段

@Stateshelf:number=0;@Stateshared:boolean=true;privateshelves:string[]=['饮水食品','照明工具','医疗用品'];privatestock:string[]=['水 12 瓶 / 压缩饼干 6 包','手电 2 个 / 电池 8 节','碘伏 / 纱布 / 常用药'];

这段代码展示了项目最核心的数据结构。

这一批项目更强调数组渲染、开关状态、条件展示、节点选择和安全确认。

四、交互逻辑分析

4.1 交互点总览

每个交互点都对应一个真实安全动作。

4.2 列表选择

很多项目使用ForEach渲染数组。

ForEach(this.items,(item:string,index:number)=>{Row(){Text(item)}.onClick(()=>{this.selected=index;})})

列表项点击能让用户在多个对象之间快速切换。

4.3 条件展示

页面会根据状态显示不同内容。

if(this.enabled){Text('已开启')}else{Text('已关闭')}

条件渲染能减少页面噪声，只展示当前需要的信息。

五、布局结构分析

5.1 页面布局概览

顶部显示共享状态，左侧分类列表选择柜层，右侧展示当前物资库存、有效期和补充提醒。

布局会优先展示核心安全状态，然后再提供操作入口。

5.2 关键 UI 代码

ForEach(this.shelves,(item:string,index:number)=>{Text(item).backgroundColor(this.shelf===index?'#EA580C':'#FFEDD5').onClick(()=>{this.shelf=index})})

这段代码体现了项目最有代表性的视觉结构。

5.3 Stack 与 Grid 的组合

Stack适合叠加预览和状态图形，Grid适合多卡片概览。

Stack(){Rect().width('100%').height(220)Text('预览信息')}

安全类页面常用这种组合展示摄像头预览、二维码、账号地图和敏感照片网格。

六、视觉层级设计

6.1 背景与强调色

当前页面背景色是#FFFBEB，强调色是#EA580C。

强调色用于突出风险、进度、选中项、提醒状态或关键按钮。

6.2 信息分区

6.3 风险信息突出

安全类页面必须让风险信息足够醒目。

Text('高风险').fontSize(32).fontWeight(FontWeight.Bold).fontColor('#DC2626')

颜色和字号要帮助用户快速判断优先级。

七、数组渲染与状态选择

7.1 ForEach 的价值

数组渲染让安全对象可以稳定扩展。

privateitems:string[]=['对象一','对象二','对象三'];

后续新增日志、网络、文件、物资、钥匙、账号或急救信息时，只需要扩展数组。

7.2 当前索引

@Stateselected:number=0;

索引用来表示当前选中项。

它适合公共网络、物资柜层、钥匙卡片和账号节点。

7.3 条件样式

.backgroundColor(index===this.selected?'#FEF3C7':'#FFFFFF')

条件样式能让当前选中项一眼可见。

八、按钮、开关和安全确认

8.1 Button

按钮适合明确动作。

• 维护提醒。
• 练习一次。
• 忘记网络。
• 添加补充记录。
• 记录异常。
• 删除确认。
• 加入清理计划。

按钮文案要短，动作要明确。

8.2 Toggle

Toggle适合表达二元状态。

Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean)=>this.enabled=on)

在线状态、暗号隐藏、VPN 提醒、家庭共享和备份检查都适合它。

8.3 确认前置条件

涉及删除或隐私销毁时，需要前置确认。

if(this.marked>0&&this.backupChecked){this.marked-=1;}

这种逻辑能避免误操作。

九、组件能力映射

9.1 常用组件表

9.2 Stack 的使用

Stack(){Rect().width('100%').height(260)Text('预览信息')}

Stack适合摄像头预览、安全暗号圆卡、账号地图和急救二维码。

9.3 Grid 的使用

Grid(){GridItem(){Text('A')}GridItem(){Text('B')}}

Grid适合日志卡片、钥匙卡片、敏感照片和二维码视觉块。

十、可扩展数据模型

10.1 安全记录对象

interfaceLifeSafetyRecord{id:string;title:string;status:string;level:number;updatedAt:number;}

这个对象可以承载一次安全动作。

10.2 历史列表

@Staterecords:LifeSafetyRecord[]=[];

从单条状态扩展为数组后，页面就能支持历史记录。

10.3 追加记录

this.records=[...this.records,{id:Date.now().toString(),title:this.shelf,status:String(this.stock),level:1,updatedAt:Date.now()}];

不可变追加方式有利于 UI 刷新。

十一、本地存储与离线能力

11.1 为什么需要离线

安全类工具经常在网络不稳定、出行或紧急情况下使用。

门口日志、个人安全码、重要文件、灾备物资、出差清单、急救信息都应该优先考虑本地可读。

11.2 保存结构

interfaceSavedLifeSafetyState{current:LifeSafetyRecord;history:LifeSafetyRecord[];version:number;}

version可以支持后续字段升级。

11.3 同步配置示例

{"module":"life-safety","offlineFirst":true,"retry":3}

对生活安全工具来说，离线优先通常比复杂同步更重要。

十二、调试与验证

12.1 验证状态变化

Button('Debug').onClick(()=>{console.info('current: '+this.shelf);})

先确认状态变化，再检查页面展示。

12.2 验证边界条件

12.3 验证小屏布局

小屏设备上要重点观察列表项、按钮和卡片是否拥挤。

长文本字段适合放入滚动区域或分栏区域，避免遮挡操作按钮。

十三、工程化拆分

13.1 抽离安全卡片

@BuilderfunctionLifeSafetyCard(label:string,value:string,color:string){Column({space:6}){Text(label).fontSize(14).fontColor('#6B7280')Text(value).fontSize(18).fontWeight(FontWeight.Bold)}.padding(16).backgroundColor(color).borderRadius(8)}

安全卡片可以复用到日志、物资、钥匙、账号和急救信息展示。

13.2 抽离列表项

@BuilderfunctionLifeSafetyRow(title:string,subtitle:string,active:boolean){Row(){Text(active?'✓':'!')Column(){Text(title)Text(subtitle)}}}

列表项抽离后，多个安全页面可以共享一致交互。

13.3 抽离主题

constTheme={pageBg:'#FFFBEB',accent:'#EA580C',radius:8,padding:20};

主题配置能让多个安全页面保持统一。

十四、业务扩展方向

14.1 家庭安全中心

门口摄像头、门锁记录、防灾物资和急救二维码可以组成家庭安全中心。

14.2 出行安全中心

出差安全、公共网络提醒和重要文件备份可以组成出行安全中心。

14.3 隐私治理中心

隐私照片销毁、网络账号地图和个人安全暗号可以组成隐私治理中心。

interfaceLifeSafetyModule{name:string;enabled:boolean;riskLevel:number;}

十五、技术亮点

15.1 场景具体

防灾物资柜 的字段和组件都围绕 家庭防灾物资分层管理 展开。

读者能从源码直接看到真实安全流程。

15.2 状态反馈及时

点击、切换、选择或确认都会修改一个可见状态。

这让移动端安全工具更可信。

15.3 扩展自然

当前项目可以继续扩展历史记录、本地持久化、离线缓存、提醒通知和系统设置跳转。

十六、总结

Disaster Supply Cabinet 展示了鸿蒙 ArkTS 在 家庭防灾物资分层管理 场景中的单页工具实现方式。

它用@State保存安全状态，用ForEach渲染列表，用Button、Toggle或条件展示承载交互，再通过卡片、文本和图形反馈结果。

从技术角度看，它覆盖了状态管理、数组渲染、条件渲染、按钮事件、开关控件、节点选择和移动端布局。

从产品角度看，防灾物资柜 把 维护当前柜层、家庭共享状态、物资分类和库存说明 变成了一个可以直接使用的轻量生活安全工具。

相关链接：

• HarmonyOS 应用开发指南
• ArkTS 快速入门
• ArkUI 声明式开发