鸿蒙 ArkTS 实战Rental Safety Check 从租房安全检查到安全守护工具完整解析前言Rental Safety Check 是一个基于鸿蒙 ArkTS 与 ArkUI 声明式 UI 实现的安全守护类单页应用核心场景是租房隐患排查与照片记录。它把 维护已完成项目数、门锁燃气电路窗户等安全项目和照片记录动作 这类日常安全需求拆成可见状态、可切换控件、列表渲染、条件展示和即时反馈。本文基于项目真实的Index.ets源码展开分析它如何使用State管理页面数据如何使用TextInput、Button、Toggle、Grid、ForEach、Stack、Slider等组件构建安全工具界面以及如何让用户在紧急、隐私、防诈骗和居住安全场景里快速确认关键信息。图示说明配图用于表达鸿蒙应用中状态、组件、条件渲染和事件反馈之间的关系帮助理解本文的代码拆解。阅读时可以结合 HarmonyOS 应用开发文档、ArkTS 语言基础、ArkUI 声明式开发范式、组件参考 等资料快速定位 ArkTS、ArkUI 和组件开发相关知识。安全类工具的价值来自清晰、稳定和低操作成本关键时刻用户需要马上看到信息而不是在复杂流程里寻找入口。一、项目定位与安全场景1.1 业务定位租房安全检查 聚焦的场景是维护已完成项目数、门锁燃气电路窗户等安全项目和照片记录动作。这类工具适合个人安全、家庭预案、隐私防护、账号提醒、防诈骗识别和居住隐患管理等轻量场景。用户打开页面时需要立刻看到当前安全状态并能用最少步骤完成一次确认或切换。1.2 技术定位项目采用鸿蒙 ArkTS 单页写法页面内直接声明状态、数组和交互逻辑。这种实现方式适合安全工具原型、教学案例和轻量实用工具。1.3 使用闭环页面的使用闭环可以概括为四步。查看当前安全状态。选择或切换关键信息。点击按钮、开关或列表项触发变化。在当前页面看到状态、流程或提示更新。二、工程结构与入口页面2.1 页面文件项目核心逻辑集中在Index.ets。entry/ src/ main/ ets/ pages/ Index.ets这个入口页面同时承担状态声明、事件处理和 UI 渲染。2.2 组件声明EntryComponentstruct Index{build(){// 声明式页面结构}}这是鸿蒙 ArkUI 页面开发中非常基础的结构。2.3 单页边界当前版本没有引入复杂后端也没有把流程拆成多个页面。它先把单个安全场景做成清晰可用的一屏工具再为后续扩展留下空间。三、状态模型拆解3.1 状态字段总览状态字段初始值页面职责done2已完成项目数checks门锁、燃气、电路、窗户护栏安全项目这些字段共同构成了 租房安全检查 的最小安全模型。3.2 状态语义done通常代表页面主状态checks则承载列表、结果、开关或当前反馈。字段命名贴近安全场景是这类小工具可维护性的关键。3.3 核心源码片段Statedone:number2;privatechecks:string[][门锁反锁顺畅,燃气阀门无漏气,电路插座无焦痕,窗户护栏稳固];这段代码展示了项目最核心的数据结构。与经营类页面不同这一批项目更强调数组渲染、开关状态、条件展示和当前选中项。四、交互逻辑分析4.1 交互点总览交互点源码行为安全价值ForEach checks渲染安全项目列表让安全状态更容易被确认和追踪onClickdone 小于 4 时递增让安全状态更容易被确认和追踪添加照片记录提供照片记录入口让安全状态更容易被确认和追踪每个交互点都对应一个真实安全动作。4.2 输入与选择同步项目中既有TextInput也有Toggle、Slider、按钮和列表点击。Toggle({type:ToggleType.Switch,isOn:true}).onChange((on:boolean){// 更新开关状态})这种组合适合不同安全场景有些需要输入有些只需要快速切换。4.3 列表项点击很多项目使用ForEach渲染数组。ForEach(this.items,(item:string,index:number){Row(){Text(item)}.onClick((){this.selectedindex;})})列表项点击能让用户在多个对象之间快速切换。五、布局结构分析5.1 页面布局概览顶部显示完成进度左侧列出安全分类右侧列表按 done 区分已记录和待处理状态。布局会优先展示核心安全状态然后再提供操作入口。5.2 关键 UI 代码ForEach(this.checks,(check:string,index:number){Row(){Text(indexthis.done?✓:!).fontSize(18).fontColor(indexthis.done?#087F5B:#E67700).width(30)Column(){Text(check).fontSize(16).fontWeight(FontWeight.Bold)Text(indexthis.done?已拍照记录:待检查并设置整改提醒).fontSize(12).fontColor(#667085)}.layoutWeight(1)}.onClick((){if(this.done4){this.done1}})})这段代码体现了项目最有代表性的视觉结构。5.3 条件渲染的作用安全工具经常需要根据当前状态显示不同内容。if(this.enabled){Text(已开启)}else{Text(已暂停)}条件渲染能减少页面噪声只展示用户当前需要的信息。六、视觉层级设计6.1 背景与强调色当前页面背景色是#F8F9FA强调色是#087F5B。强调色用于突出紧急状态、风险分、开关状态、路线节点或安全完成进度。6.2 信息分区区域视觉方式作用顶部看板大字号或高对比背景快速识别主状态列表区ForEach 渲染展示对象和流程操作区Button、Toggle、Slider完成确认和切换反馈区Text 文案说明当前状态6.3 风险信息突出安全类页面必须让风险信息足够醒目。Text(风险分).fontSize(14).fontColor(#495057)颜色和字号要帮助用户快速判断优先级。七、数组渲染与状态选择7.1 ForEach 的价值数组渲染让安全对象可以稳定扩展。privateitems:string[][对象一,对象二,对象三];后续新增物品、权限、路线点或安全项目时只需要扩展数组。7.2 当前索引Stateselected:number0;索引用来表示当前选中项。它适合物品列表、账号列表和步骤流程。7.3 条件样式.backgroundColor(indexthis.selected?#D0F0FD:#FFFFFF)条件样式能让当前选中项一眼可见。八、开关、滑块与按钮8.1 ToggleToggle适合表达二元状态。Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean)this.enabledon)提醒开关、隐私提醒和通知状态都可以使用它。8.2 SliderSlider适合表达强度。Slider({value:this.maskLevel,min:20,max:100,step:1})隐私遮盖强度这类场景比按钮更适合滑块。8.3 Button按钮适合明确动作。呼叫联系人。导出记录。通知联系人。添加照片记录。显示离线信息。按钮文案要短动作要明确。九、组件能力映射9.1 常用组件表组件项目用途特点Text展示标题、状态和说明轻量直接Button触发安全动作行为明确Toggle切换提醒或开关状态直观Grid展示卡片或码块适合概览ForEach渲染列表和流程扩展方便Stack叠加预览和风险图形视觉集中9.2 Stack 的使用Stack(){Rect().width(100%).height(230)Text(预览信息)}Stack适合快递照片预览、儿童卡片和风险分展示。9.3 Grid 的使用Grid(){GridItem(){Text(A)}GridItem(){Text(B)}}Grid适合权限卡、状态卡、离线码和概览信息。十、可扩展数据模型10.1 安全记录对象interfaceSafetyRecord{id:string;title:string;status:string;level:number;updatedAt:number;}这个对象可以承载一次安全动作。10.2 历史列表Staterecords:SafetyRecord[][];从单条状态扩展为数组后页面就能支持历史记录。10.3 追加记录this.records[...this.records,{id:Date.now().toString(),title:this.done,status:String(this.checks),level:1,updatedAt:Date.now()}];不可变追加方式有利于 UI 刷新。十一、本地存储与离线能力11.1 为什么需要离线安全类工具经常在网络不稳定或紧急情况下使用。紧急联系人、儿童走失卡、家庭预案和夜归路线都应该优先考虑离线可读。11.2 保存结构interfaceSavedSafetyState{current:SafetyRecord;history:SafetyRecord[];version:number;}version可以支持后续字段升级。11.3 同步配置示例{module:safety,offlineFirst:true,retry:3}对安全工具来说离线优先通常比复杂同步更重要。十二、调试与验证12.1 验证状态变化Button(Debug).onClick((){console.info(current: this.done);})先确认状态变化再检查页面展示。12.3 验证小屏布局小屏设备上要重点观察列表项、按钮和卡片是否拥挤。长文本字段适合放入Scroll中避免遮挡操作按钮。十三、工程化拆分13.1 抽离安全卡片BuilderfunctionSafetyCard(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 抽离列表项BuilderfunctionSafetyRow(title:string,subtitle:string,active:boolean){Row(){Text(active?✓:!)Column(){Text(title)Text(subtitle)}}}列表项抽离后多个安全页面可以共享一致交互。13.3 抽离主题constTheme{pageBg:#F8F9FA,accent:#087F5B,radius:8,padding:20};主题配置能让多个安全页面保持统一。十四、业务扩展方向14.1 个人安全中心紧急联系人、夜归守护和儿童走失卡可以组成个人安全中心。14.2 隐私保护中心权限检查、快递隐私贴和密码更换提醒可以组成隐私保护中心。14.3 居住安全中心家庭应急预案、租房安全检查和物品防丢可以组成居住安全中心。interfaceSafetyModule{name:string;enabled:boolean;riskLevel:number;}十六、总结Rental Safety Check 展示了鸿蒙 ArkTS 在 租房隐患排查与照片记录 场景中的单页工具实现方式。它用State保存安全状态用ForEach渲染列表用Toggle、Button、Slider或条件展示承载交互再通过卡片、文本和图形反馈结果。从技术角度看它覆盖了状态管理、数组渲染、条件渲染、按钮事件、开关控件、滑块控件和移动端布局。从产品角度看租房安全检查 把 维护已完成项目数、门锁燃气电路窗户等安全项目和照片记录动作 变成了一个可以直接使用的轻量安全守护工具。相关资源HarmonyOS 应用开发文档ArkTS 语言基础ArkUI 声明式开发范式