鸿蒙 ArkTS 实战：Florist Order Board 从专业流程到完成闭环完整解析

鸿蒙 ArkTS 实战Florist Order Board 从专业流程到完成闭环完整解析前言Florist Order Board 是一个面向花店订单看板场景的鸿蒙 ArkTS 单页应用。它没有把重点放在复杂后台能力上而是围绕一线人员最常见的记录、统计、提醒和完成确认构建移动端工作台。这类应用的价值在于把订单数量、备注信息和完成状态放到同一屏减少纸质登记、聊天转述和临时表格之间的切换。本文会结合项目中的Index.ets从数据模型、状态管理、统计逻辑、表单录入、列表渲染和扩展方向完整拆解。场景判断节日订单集中时花束制作、贺卡和配送时间经常由不同人员接力处理。图示说明本文关注的是 Florist Order Board 这类轻量工具应用的页面状态、业务记录和交互闭环。一、项目定位与业务目标1.1 面向的真实业务项目服务于 花店在当天订单中管理花束、配送时间、贺卡备注和完成状态。使用者主要包括花艺师、门店店员、配送协调员他们对系统的要求通常不是功能堆叠而是打开即用、信息集中、状态明确。订单看板把每个花束任务压缩成可勾选记录减少口头交接造成的遗漏。 这也是该项目选择单页结构的核心原因。1.2 页面能力拆分当前页面可以拆成四个层次顶部标题用来确认正在处理的业务类型。统计区域用Orders和Done表示总量与完成度。功能标签区域用四个短标签压缩业务能力。表单与列表区域用于新增记录、展示备注、切换完成状态。能力区域项目实现业务含义统计卡片totalAmount / doneCount统计订单数量和完成数量功能标签四个 Text 标签明确页面覆盖的业务点录入表单三个 TextInput采集标题、数量和备注记录列表ForEach 渲染展示任务并支持勾选二、工程结构与入口文件2.1 关键目录项目采用标准鸿蒙 Stage 工程结构业务页面位于entry/src/main/ets/pages/Index.ets。单页工具型应用的优势是路径清晰阅读成本低后续扩展时也容易把模型、组件和服务逐步拆出去。entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json52.2 模块配置关注点模块配置负责声明入口 Ability 和资源范围。文章讨论的业务逻辑主要集中在页面层但理解模块结构有助于定位运行入口。{module:{name:entry,type:entry,srcEntry:./ets/Application/AbilityStage.ts,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},articleTopic:花店订单看板}这一层不直接参与业务计算却决定应用如何被系统加载。对单页工具而言保持配置简洁可以减少排查路径。三、数据模型设计3.1 记录对象的最小闭环Florist Order Board 的每条业务记录由title、amount、note、done四个字段构成。这个模型非常克制但已经覆盖了列表工具的核心闭环是什么、数量多少、有什么备注、是否完成。interfaceProRecord{title:string;amount:number;note:string;done:boolean;}Staterecords:ProRecord[][{title:Rose bouquet,amount:1,note:Delivery 15:00,done:false},{title:Sunflower basket,amount:1,note:Greeting card ready,done:false}];3.2 默认数据的业务含义项目内置了两条默认记录方便首次打开页面时直接看到业务样例也能验证统计区和列表区是否联动正常。默认标题数量备注完成状态Rose bouquet1Delivery 15:00falseSunflower basket1Greeting card readyfalse这两条数据不是随意占位而是围绕花材清单、配送时间、贺卡内容和完成状态四个业务点设计。四、状态管理与输入缓存4.1 页面状态字段页面使用State保存记录列表、三个输入框内容、提醒开关和状态文案。所有字段都直接参与界面刷新因此适合放在组件状态中。StatetitleText:string;StateamountText:string;StatenoteText:string;StatenotifyOn:booleantrue;Statestatus:stringProfessional workflow ready;4.2 为什么输入框独立保存标题、数量、备注分别保存在titleText、amountText、noteText中避免用户输入过程直接污染记录列表。只有点击按钮并通过校验后才会生成新的记录。关键点表单草稿和正式记录分离可以降低误写入概率也让状态文案有明确的反馈位置。五、统计逻辑总量与完成度5.1 总量统计totalAmount()遍历 records把每条记录的 amount 累加。对于本项目来说它代表Orders的当前总数也就是页面顶部最醒目的业务指标。5.2 完成数量统计doneCount()只统计done为 true 的记录并以完成数/总记录数的方式展示让用户快速判断剩余处理压力。privatetotalAmount():number{lettotal0;this.records.forEach((item:ProRecord){totalitem.amount;});returntotal;}privatedoneCount():number{letcount0;this.records.forEach((item:ProRecord){if(item.done){count;}});returncount;}方法输入输出页面位置totalAmountrecords.amountOrders左侧统计卡片doneCountrecords.doneDone 比例右侧统计卡片toggleDone记录索引完成状态变更列表勾选框六、表单新增记录6.1 校验规则新增记录时先把数量字符串转换为数字再检查标题是否为空、数量是否有效。校验失败时页面会把状态文案改为Enter title and valid number。6.2 新记录插入到顶部通过数组展开语法把新记录放到旧列表前面这样最新任务会出现在最上方符合现场工作台的使用习惯。privateaddRecord():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.records[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:No note yet,done:false},...this.records];this.titleText;this.amountText;this.noteText;this.statusRecord added;}在 花店订单看板 场景里新记录通常比历史记录更需要优先处理因此顶部插入比尾部追加更适合移动端快速操作。七、完成状态切换7.1 勾选逻辑完成状态通过 checkbox 触发。代码先修改指定索引的done字段再使用数组展开生成新引用确保 UI 能感知 records 的变化。privatetoggleDone(index:number):void{this.records[index].done!this.records[index].done;this.records[...this.records];}7.2 状态驱动视觉反馈记录完成后列表项背景会从白色切换为浅绿色。这个视觉变化比单纯文字更直接适合一线人员在忙碌环境中快速扫描。状态背景色用户感知未完成#FFFFFF仍需处理已完成#DCFCE7可以归档或跳过输入异常状态文案提示需要修正标题或数量八、页面布局与信息层级8.1 统计卡片顶部两张统计卡片分别表达总量和完成度颜色也做了区分蓝色强调数量绿色强调完成状态。Row({space:10}){Column({space:4}){Text(Orders).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.layoutWeight(1).padding(14).backgroundColor(#DBEAFE).borderRadius(8)Column({space:4}){Text(Done).fontSize(13).fontColor(#475569)Text(this.doneCount()/this.records.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 功能标签页面中的四个标签分别是Flower list、Delivery time、Greeting card、Done status。它们不是按钮而是能力提示用来让使用者快速确认这个工具覆盖哪些工作环节。功能标签对应到中文业务可以理解为花材清单确认记录主体。配送时间补充关键过程信息。贺卡内容让任务不会沉没。完成状态为后续交接保留依据。九、输入区域与列表渲染9.1 输入区域表单区采用三个输入框加一个按钮的结构字段少、路径短适合移动端单手录入。数量输入框使用InputType.Number降低录入非数字内容的概率。Column({space:10}){TextInput({placeholder:Title,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Number,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add record).height(42).width(100%).onClick(()this.addRecord())}9.2 列表区域列表使用ForEach根据 records 渲染。每行左侧是完成勾选中间是标题和备注右侧是数量信息密度较高但不会混乱。ForEach(this.records,(item:ProRecord,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.done}).onChange(()this.toggleDone(index))Column({space:6}){Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Text(item.note).fontSize(14).fontColor(#475569)}.layoutWeight(1).margin({left:8})Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.padding(14).backgroundColor(item.done?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})这个布局非常适合 花店订单看板标题承载对象备注承载现场上下文数量承载统计口径勾选承载工作闭环。十、业务流程复盘10.1 从录入到完成结合项目代码Florist Order Board 的一次完整业务流可以分为四步录入花束名称。填写订单数量。补充配送或贺卡备注。出单后标记完成。10.2 异常路径当标题为空或数量无效时新增动作不会写入列表而是更新状态文案。这个处理虽然简单但避免了空记录进入正式列表。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、体验细节与可维护性11.1 低成本可维护项目没有引入额外状态库页面逻辑都在组件内部完成。对于这类轻量工具简单结构反而有利于交付和维护。11.2 可扩展边界后续可以扩展花材库存扣减、配送路线和客户留言模板。扩展时可以遵循下面顺序先把记录模型从页面拆到独立文件。再增加本地持久化保证关闭应用后数据不丢失。最后接入网络同步、权限和多端协同。interfacePersistedRecord{id:string;title:string;amount:number;note:string;done:boolean;updatedAt:number;}十二、调试与验证思路12.1 手动验证路径验证时重点看三件事新增记录是否在顶部出现、统计总量是否变化、勾选后完成比例和背景色是否同步更新。12.2 边界输入边界输入包括空标题、非数字数量、负数、超大数量和空备注。当前代码已经拦截空标题和非数字空备注会自动使用No note yet。# DevEco Studio 中可执行的常规验证动作# 1. 启动预览或真机运行# 2. 输入标题和数量# 3. 点击 Add record# 4. 勾选列表项观察 Done 统计验证项预期结果业务意义新增有效记录列表顶部出现新行现场可以快速追加任务空标题提交显示错误状态避免无效记录勾选完成Done 统计变化形成完成闭环备注为空使用默认备注保持列表信息完整十三、适合复用的页面模式13.1 通用记录台Florist Order Board 的实现可以抽象成通用记录台一个数组、三个输入字段、两个统计函数、一个新增函数、一个完成切换函数。许多门店、培训、医疗、仓储类小工具都可以复用这个模式。13.2 适配更多行业只要把默认数据、统计名称、功能标签和业务文案替换掉就能变成另一个行业的小工具。真正需要谨慎处理的是字段语义和统计口径不能只改标题。复用公式 业务对象 数量口径 备注上下文 完成状态 可闭环的移动工作台总结Florist Order Board 用非常克制的 ArkTS 实现完成了花店订单看板场景中的核心闭环记录任务、统计数量、补充备注、切换完成状态。它的代码重点不在复杂算法而在业务信息组织方式。对于 花艺师、门店店员、配送协调员 来说这种轻量工具的关键价值是减少切换、降低漏处理概率并把当天工作沉淀成清晰列表。后续如果接入本地持久化、提醒能力和行业字段这个项目就能从演示型页面继续成长为可落地的小型业务应用。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco Studio应用包结构Ability KitCSDN 写作平台Markdown 基础语法