鸿蒙 ArkTS 实战Community Medicine Pickup 从社区代买药到社区便民应用完整解析前言社区代买药 是一个贴近生活服务场景的鸿蒙 ArkTS 单页应用。它的源码并不复杂却把状态驱动界面、列表循环渲染、条件样式、按钮事件和业务结果即时反馈都放在了一个很清楚的页面里。本文围绕 Community Medicine Pickup 的真实页面内容展开分析它如何把“社区服务人员根据处方照片核对降压药、感冒冲剂和医用棉签并记录配送地址与代买费用。”实现成可交互、可扩展、可复用的鸿蒙应用页面。做生活服务类工具时最重要的不是堆功能而是让用户在一次点击后马上看到业务状态变化。图示说明本文拆解的页面包含业务标题区、服务数据区、状态反馈区和操作按钮区适合用来学习 ArkTS 单页业务建模。一、业务背景与页面目标1.1 场景背景社区服务人员根据处方照片核对降压药、感冒冲剂和医用棉签并记录配送地址与代买费用。这类应用通常出现在社区服务、门店登记、上门服务、本地生活和轻量办公场景中。用户不会长时间停留研究界面而是希望快速确认状态、费用、进度或当前选项。1.2 页面目标页面目标可以拆成三点清楚展示当前业务对象和核心信息。让用户通过点击完成选择、推进或确认。在当前页面实时反馈业务结果。1.3 技术关注点关注点项目体现技术方式状态变化paid、selectedState数据选项meds降压药、感冒冲剂、医用棉签private 数组点击交互按钮、卡片、条目onClick / onChange视觉反馈高亮、进度、金额条件样式二、项目入口与源码结构2.1 页面入口该项目的主要业务集中在 Index 页面中使用Entry标记入口组件使用Component描述可渲染结构。单页应用的好处是路径短适合集中讲清业务闭环。EntryComponentstruct Index{build(){Column(){Text(社区代买药)}}}2.2 单页结构优势对于 社区代买药 这种业务规模单页结构有三个优势状态来源集中点击后变化容易追踪。业务数组靠近渲染逻辑维护成本低。调试时可以直接观察页面刷新结果。2.3 页面模块拆解模块作用典型组件标题区域显示业务名称和摘要Row、Column、Text选项区域展示任务、流程或服务项ForEach、Grid、Stack反馈区域显示费用、进度或状态Text、Circle、Rect操作区域完成确认或推进Button、Toggle三、状态建模3.1 State 字段表字段类型业务含义paidnumber已记录费用默认 68selectednumber当前选中的药品条目这些字段全部参与界面渲染只要字段更新相关文案、颜色、按钮状态或计算结果就会同步变化。3.2 状态声明代码EntryComponentstruct Index{Statepaid:number68;// 已记录费用默认 68Stateselected:number0;// 当前选中的药品条目}3.3 状态粒度设计社区代买药 的状态字段数量较少说明页面没有过度建模。它把真正会变化的内容交给 State把静态选项保留为 private 数组。State 应该服务于界面变化而不是替代所有普通字段。四、业务数据数组4.1 数组内容meds降压药、感冒冲剂、医用棉签数组让页面可以通过循环渲染多个业务选项避免重复写很多结构相似的 Text、Row 或 GridItem。4.2 ForEach 渲染方式ForEach(this.items,(item:string,index:number){Text(item).fontSize(16).fontWeight(FontWeight.Bold).onClick((){this.currentindex})})4.3 索引绑定的价值当前项目大量使用索引来表示“选中哪一项”或“推进到哪一步”。这种方式适合选项数量固定、展示顺序稳定的页面。Text(this.items[this.current]).fontColor(this.currentindex?#FFFFFF:#0F766E)五、页面布局设计5.1 主容器组织页面主容器通常由 Column 或 Row 构成。社区代买药 的布局重点是先给出业务主题再让用户看到可操作区域最后展示结果。Column(){Text(社区代买药)Blank()Button(确认)}.width(100%).height(100%).backgroundColor(#FFFFFF)5.2 信息层级层级展示内容设计目标一级标题、业务对象快速识别页面用途二级时间、备注、说明补充业务上下文三级费用、进度、状态强化当前结果操作确认、推进、新增完成业务动作5.3 主题色策略项目使用#0F766E作为主色常出现在按钮、高亮项和核心数字上。这种颜色策略能让用户快速找到当前可操作区域。Button(主要操作).backgroundColor(#0F766E)六、交互行为解析6.1 主要动作点击药品条目切换 selected记录费用按钮让 paid 增加 5处方照片区域展示已核对状态6.2 项目中的事件代码Text(item).backgroundColor(this.selectedindex?#0F766E:#FFFFFF).onClick((){this.selectedindex})Button(记录费用).onClick((){this.paid5})6.3 交互闭环点击药品条目切换 selected记录费用按钮让 paid 增加 5处方照片区域展示已核对状态点击动作与页面反馈绑定在同一个状态字段上因此用户不需要跳转页面也能立即知道业务是否推进成功。七、核心业务计算7.1 计算表达式paidpaid57.2 计算结果展示在 社区代买药 中计算结果通常直接出现在 Text 组件中比如进度、费用、数量或状态文案。Text(当前结果String(result)).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#0F766E)7.3 封装为方法如果后续业务规则变多可以将计算封装为方法privategetResultText():string{returnString(paid paid 5)}这样可以让 build 方法更短也方便单独调整业务规则。八、ArkTS 组件使用细节8.1 Text 组件Text 用来表达标题、说明、状态、金额和备注。字体大小和颜色变化是生活服务类页面里最基础的视觉层级。Text(社区代买药).fontSize(26).fontWeight(FontWeight.Bold).fontColor(#0F766E)8.2 Button 组件Button 承载明确动作例如确认、推进、新增、记录费用等。一个按钮最好对应一个清楚的业务变化。Button(推进).backgroundColor(#0F766E).onClick((){this.current1})8.3 条件样式条件样式让用户知道当前选中项、完成项或待处理项。.backgroundColor(this.currentindex?#0F766E:#FFFFFF).fontColor(this.currentindex?#FFFFFF:#111827)8.4 Stack 与图形组件部分页面使用 Stack、Circle、Rect 组织视觉区域。它们适合表达照片区域、进度节点、仪表盘或业务卡片。Stack(){Rect().width(100%).height(220).fill(#F8FAFC)Text(业务信息)}九、可维护性分析9.1 字段命名paid、selected 都是直接对应业务含义的字段阅读源码时不需要额外猜测它们控制哪一块界面。9.2 静态数据管理静态数组靠近组件顶部后续新增条目时只需要改数组不需要复制整段 UI。privateitems:string[][选项一,选项二,选项三]9.3 组件拆分时机当页面扩展到多个区域都需要复用样式时可以拆出 builder 方法。BuilderprivateTag(text:string,selected:boolean){Text(text).fontColor(selected?#FFFFFF:#0F766E)}十、调试与验证10.1 操作路径验证调试 社区代买药 时可以按真实业务动作验证打开页面后初始状态是否正确。点击列表、卡片或按钮后状态是否变化。费用、进度或状态文案是否同步刷新。边界条件是否不会越界。10.2 日志定位Button(调试).onClick((){console.info(state changed)})10.3 常见问题表问题可能原因处理方式点击后没有变化字段不是 State将变化字段声明为 State高亮位置不对index 与状态值不匹配检查 ForEach 顺序文案不刷新表达式没有依赖状态让 Text 读取状态字段数字越界递增缺少限制增加 if 判断十一、扩展方向11.1 增加本地缓存对于 社区便民 场景可以保存最近一次选择和业务结果让用户下次打开时继续处理。interfaceLocalSnapshot{selected:numberupdatedAt:string}11.2 增加接口同步当应用接入后台系统时可以把状态字段转换为请求参数。{page:社区代买药,state:paid、selected,scene:社区便民}11.3 增加角色权限生活服务类应用常见多个角色用户、服务人员、管理员。后续可以基于角色控制按钮是否可见。十二、体验优化12.1 点击区域服务登记类页面常在移动场景下使用按钮和卡片的 padding 要足够避免误触。12.2 反馈清晰每次状态变化后页面应该立刻有视觉反馈颜色变化、数字变化、状态文案变化至少要有一种。12.3 边界控制对于递增、推进、完成类操作需要限制最大值。if(this.currentmax){this.current1}十三、完整实现片段13.1 页面骨架EntryComponentstruct Index{Statepaid:number68;Stateselected:number0;build(){Column(){Text(社区代买药)Text(业务类型社区便民)}}}13.2 数据声明// meds降压药、感冒冲剂、医用棉签privateprimaryColor:string#0F766E13.3 事件处理Text(item).backgroundColor(this.selectedindex?#0F766E:#FFFFFF).onClick((){this.selectedindex})Button(记录费用).onClick((){this.paid5})13.4 状态展示Text(状态已更新).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#0F766E)十四、同类页面复用14.1 可复用结构社区代买药 的页面结构可以迁移到很多同类场景先定义业务数组再定义当前状态最后通过按钮推进。14.2 可复用逻辑选项列表通过 ForEach 渲染。当前项通过 number 状态保存。布尔状态用于确认、完成、收款等二值场景。费用或进度通过表达式计算。14.3 可复用样式主题色、卡片圆角、间距和文字层级可以抽成公共常量让多个页面保持一致。十五、工程价值15.1 对初学者的价值这个项目适合练习 ArkTS 的基础语法、声明式 UI、状态刷新和事件绑定。15.2 对业务开发的价值它证明了轻量页面也需要清晰建模。只要状态字段设计合理小页面同样能表达完整业务流程。15.3 对后续扩展的价值后续可以加入数据持久化、远端接口、权限控制、订单编号、服务评价和历史记录让 社区代买药 从演示页面升级为真实工具。总结Community Medicine Pickup 通过简洁的 ArkTS 代码完成了 社区便民 场景的核心交互。页面围绕 paid、selected 建立状态模型围绕 meds降压药、感冒冲剂、医用棉签 组织业务数据再通过按钮和条件样式完成即时反馈。从这个项目可以看到鸿蒙 ArkTS 做轻量生活服务应用非常直接状态定义清楚数组渲染稳定交互动作单一页面反馈及时就能支撑一个可读、可维护、可扩展的业务页面。相关链接HarmonyOS 应用开发指南ArkTS 快速入门ArkUI 声明式开发
