企业官网建设流程全解析

鸿蒙 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 使用闭环

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

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 状态语义

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

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

3.3 核心源码片段

@Statedone:number=2;privatechecks:string[]=['门锁反锁顺畅','燃气阀门无漏气','电路插座无焦痕','窗户护栏稳固'];

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

与经营类页面不同，这一批项目更强调数组渲染、开关状态、条件展示和当前选中项。

四、交互逻辑分析

4.1 交互点总览

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

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.selected=index;})})

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

五、布局结构分析

5.1 页面布局概览

顶部显示完成进度，左侧列出安全分类，右侧列表按 done 区分已记录和待处理状态。

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

5.2 关键 UI 代码

ForEach(this.checks,(check:string,index:number)=>{Row(){Text(index<this.done?'✓':'!').fontSize(18).fontColor(index<this.done?'#087F5B':'#E67700').width(30)Column(){Text(check).fontSize(16).fontWeight(FontWeight.Bold)Text(index<this.done?'已拍照记录':'待检查并设置整改提醒').fontSize(12).fontColor('#667085')}.layoutWeight(1)}.onClick(()=>{if(this.done<4){this.done+=1}})})

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

5.3 条件渲染的作用

安全工具经常需要根据当前状态显示不同内容。

if(this.enabled){Text('已开启')}else{Text('已暂停')}

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

六、视觉层级设计

6.1 背景与强调色

当前页面背景色是#F8F9FA，强调色是#087F5B。

强调色用于突出紧急状态、风险分、开关状态、路线节点或安全完成进度。

6.2 信息分区

6.3 风险信息突出

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

Text('风险分').fontSize(14).fontColor('#495057')

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

七、数组渲染与状态选择

7.1 ForEach 的价值

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

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

后续新增物品、权限、路线点或安全项目时，只需要扩展数组。

7.2 当前索引

@Stateselected:number=0;

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

它适合物品列表、账号列表和步骤流程。

7.3 条件样式

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

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

八、开关、滑块与按钮

8.1 Toggle

Toggle适合表达二元状态。

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

提醒开关、隐私提醒和通知状态都可以使用它。

8.2 Slider

Slider适合表达强度。

Slider({value:this.maskLevel,min:20,max:100,step:1})

隐私遮盖强度这类场景比按钮更适合滑块。

8.3 Button

按钮适合明确动作。

• 呼叫联系人。
• 导出记录。
• 通知联系人。
• 添加照片记录。
• 显示离线信息。

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

九、组件能力映射

9.1 常用组件表

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 声明式开发范式