ArkTS 表单工程停车记录页的快捷胶囊回填与四字段表单App 56「停车缴费记录」记录页Func1Tab主题色#2D3436深灰黑。本页是停车记录的录入页——白色单行 Header添加记录20 号加粗常用地点卡常用地点标题 4 个 快捷胶囊公司车库/万达广场/市医院/超市停车场点击回填地点四字段停车表单停车地点 TextInput 双向绑定 / 入场时间·出场时间双列 Row / 停车费用元Number 键盘深灰全宽保存记录按钮地点非空弹记录已保存空则弹请填写停车地点。本篇基于56-parking-record/entry/src/main/ets/pages/Func1Tab.ets共 92 行逐段拆解附 4 张实机截图。一、整体结构三区Header 快捷地点 表单布局记录页是快捷入口 录入表单的组合布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.QuickPlaces() this.FormCard() Button(保存记录).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.place.length 0 ? 记录已保存 : 请填写停车地点 }); }) } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构QuickPlaces— 常用地点快捷胶囊点击回填地点FormCard— 四字段停车表单地点/入场/出场/费用保存记录— 深灰全宽 CTA 按钮地点校验记录页是录入页——先点常用地点快捷回填公司车库、万达广场等一键填入再补录时间与费用入场/出场/金额最后保存。快捷 表单的组合常用地点解决高频地点重复输入的痛点用户常去的地方就那几个表单完成完整录入。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header() { Row() { Text(添加记录).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }功能页 Header 标准范式20 号、safeTop 56固定高、文字贴底与费用页、我的页同款。添加记录是动作型标题动词短语暗示待完成的录入操作与系列录入页App 52 上传票据、App 53 添加商品、App 55 添加提醒一致。三、QuickPlaces常用地点快捷胶囊QuickPlaces() { Column({ space: 10 }) { Text(常用地点).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.commonPlaces, (p: string) { Text( p).fontSize(12).fontColor(C.textSub) .padding({ left: 12, right: 12, top: 7, bottom: 7 }) .backgroundColor(C.card).borderRadius(14).border({ width: 1, color: C.stroke }) .margin({ right: 10, bottom: 10 }) .onClick(() { this.place p; promptAction.showToast({ message: p }); }) }, (p: string) p) }.width(100%) } }技术拆解常用地点胶囊4 个带 前缀的地点胶囊公司车库/万达广场/市医院/超市停车场——Flex({ wrap: FlexWrap.Wrap })换行排布3 个一行 1 个换行白底 1 灰描边borderRadius(14)与选中态胶囊主色底不同——快捷胶囊是白底描边非单选点击即填入视觉上可点击但非选中语义。点击回填onClick(() { this.place p; })——点击把地点填入表单this.place p同时 Toast 提示公司车库——点一下、填好了的快捷录入省去手输常用地点。与表单联动填入的地点会显示在下方停车地点输入框text: this.place双向绑定——快捷胶囊 → 表单回显的联动闭环。常用地点数据公司车库/万达广场/市医院/超市停车场——与首页记录的地点万达/公司/医院/超市、费用页地点公司/万达/医院高度重合常用地点是高频停车场的集合录入时点胶囊即用。四、FormCard四字段停车表单FormCard() { Column({ space: 14 }) { Column({ space: 6 }) { Text(停车地点).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 输入停车地点, text: this.place }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.place v; }) } Row({ space: 12 }) { Column({ space: 6 }) { Text(入场时间).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 14:30 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.inTime v; }) }.layoutWeight(1) Column({ space: 6 }) { Text(出场时间).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 16:45 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.outTime v; }) }.layoutWeight(1) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }四字段表单停车地点13 号灰标签 TextInput({ placeholder: 输入停车地点, text: this.place })——text: this.place是受控回显快捷胶囊填入的值显示在输入框用户也可手动修改onChange 双向同步this.place——这是系列中少见的受控输入写法多数页面只 onChange 单向绑定回显 手输两种录入方式统一。入场时间/出场时间双列Row({ space: 12 }) 两个layoutWeight(1)Column——入场14:30与出场16:45左右并排时间输入两栏一行占位符示范 24 小时制格式14:30/16:45时长由两时间差计算产品化后 16:45 - 14:30 2小时15分。停车费用元TextInput({ placeholder: 0.00 }).type(InputType.Number)——Number 键盘只输数字费用是停车记录的核心字段首页/费用页金额都来自这里占位符 0.00 暗示两位小数免费停车可填 0。表单布局Column({ space: 14 })垂直排列 padding(16)白卡圆角 20 描边——与系列录入表单同款。五、保存按钮状态校验的交互闭环Button(保存记录).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.place.length 0 ? 记录已保存 : 请填写停车地点 }); })技术拆解全宽深灰 CTAwidth(100%).height(48)backgroundColor(C.primary)——主色全宽按钮录入页标准 CTA深灰与主题一致。三元校验this.place.length 0 ? 记录已保存 : 请填写停车地点——以地点为校验锚点停车地点是记录的核心标识没有地点的停车记录没有意义地点非空 → 保存成功为空 → 提示请填写停车地点快捷胶囊点击已填入地点正常流程不会触发空校验。六、跨页数据自洽停车录入的全局闭环记录页与首页、费用、我的三页形成闭环记录常用地点 4 胶囊↔ 首页万达/公司/医院/超市——同一批停车场常用地点是高频场所录入时点胶囊填入的地点会出现在首页最近停车列表。记录停车费用↔ 首页¥12 万达广场——录入的停车费用12 元出现在首页列表万达 ¥12并汇入首页本月停车费 286 元与费用页月度统计录入 → 展示 → 汇总全链路。记录入场/出场时间↔ 首页2小时15分——录入的入场出场时间算出时长2小时15分首页显示时长 · 日期时间录入 → 时长展示。记录保存↔ 我的页156 次累计——每保存一条记录我的页停车次数 1产品化后录入量与总量同步。记录常用地点↔ 费用页地点消费——常用地点中收费的公司/万达/医院在费用页按地点统计20 次 400 元等快捷录入的地点就是费用统计的维度。七、系列横向对比录入页的快捷胶囊应用系列中录入型页面的快捷设计对比App 56 记录页常用地点快捷胶囊点击回填——快捷回填点一下填好地点。App 43 明信片最近联系人回填——联系人回填选历史联系人。App 49 投票创建选项动态增删——动态行随交互增长。App 52 上传票据双虚线卡 表单——来源选择拍照/相册。56 的差异化在于**地点胶囊的受控回填**——常用地点胶囊点击后通过text: this.place受控绑定回显到输入框用户可改可确认这是系列中唯一快捷胶囊 受控输入的组合其他录入页的快捷多为直接跳转。快捷地点解决高频重复输入痛点停车地点就那几个受控回显让快捷填入与手动修改无缝衔接。八、开发者避坑录入页的四个细节从 Func1Tab 的实现提炼四个易踩坑点受控 TextInput 的循环风险text: this.placeonChange((v) { this.place v; })——受控组件注意回写循环程序赋值触发 onChange 再赋值可能死循环ArkUI 中此写法安全onChange 由用户输入触发但产品化时程序化赋值需注意避免赋值 → 触发 onChange → 再赋值的连锁。时间格式与时长计算入场/出场是自由文本——产品化必须校验格式时:分并计算时长出场 - 入场且校验出场 入场否则时长负数更优方案用 TimePicker 时间选择器。费用为 0 与免费的区分费用 Number 输入可填 0——0 表示免费停车首页显示免费绿字需区分填了 0免费与没填费用未知产品化用空值校验区分。快捷胶囊与表单的同步点击胶囊填入this.place后输入框回显依赖text: this.place——若忘记绑text参数胶囊点击后表单不显示已填地点用户以为没填上受控绑定是快捷录入可见性的关键。九、常见问题 FAQ问常用地点怎么变成常用的答演示版本写死了 4 个高频停车场公司车库/万达广场/市医院/超市停车场产品化后常用地点由使用频率自动生成停车次数最多的地点进入常用列表或用户在设置中手动添加常用地点。快捷胶囊解决的是高频地点重复输入的痛点。问入场时间和出场时间都要填吗答当前演示允许不填只校验地点产品化后建议至少填一个或都用时间选择器——因为首页展示的2小时15分时长由入场/出场计算不填时间则时长缺失。免费停车如超市可以不填费用默认 0但时间建议保留记录停了多久。问保存记录时为什么只校验地点答因为停车地点是记录的核心标识——没有地点首页列表无法显示、费用统计无法归因不知道在哪花的钱。时间与费用可以保存后补全或默认值兜底校验只锁不可缺失的字段降低录入门槛。十、验收与总结本篇对 56-parking-record 记录页Func1Tab92 行做了逐块拆解三区结构Header添加记录 QuickPlaces常用地点快捷胶囊 FormCard四字段表单 保存按钮核心交互常用地点点击回填text: this.place受控回显、时间双列并排、保存按钮地点校验主题色#2D3436深灰黑——保存按钮、胶囊描边数据闭环快捷地点 → 地点回填 → 保存记录 → 首页列表 → 费用统计录入驱动全局记录页是停车缴费记录的录入口——点常用地点快速填入、补录时间费用、校验保存一页完成停车记录的创建。十、扩展思考从手工录入到智能记录记录页的演进方向是智能记录第一是停车短信解析——很多停车场离场后发扣费短信万达广场停车 2小时15分 收费 12 元演进方向是解析短信自动生成记录地点/时长/费用自动填入从手工录入变为自动捕获第二是定位自动识别——进入常用停车场时自动定位并开始计时到停车场自动记录入场时间离场时按出场时间自动算费用记录页的常用地点是定位识别的基础第三是车牌快捷管理——多车用户记录时要选哪辆车停的演进方向是车牌切换沪A·88888 停的 vs 另一辆车记录页可增加车牌字段第四是票据拍照归档——停车缴费后拍下收费小票/付款截图作为凭证演进方向是记录附带照片类似 App 53 商品页的照片上传记录页可增加上传凭证入口。这四个方向都从记录页已有的四字段长出来让记一笔变成自动记。十一、从设计稿到代码的映射把记录页设计稿翻译成代码有几组典型映射第一常用地点胶囊映射为流式换行容器加描边文本——设计稿顶部的地点胶囊组代码里用流式换行容器包裹带位置图标前缀的描边文本点击回填地点状态第二停车地点回填映射为受控输入组件——设计稿里点击胶囊后地点出现在输入框代码里用带文本参数的输入组件实现回显双向绑定地点状态第三时间双列映射为等权重的行内两列——设计稿的入场出场并排代码里用一行内两个等权重列各放标签与输入组件第四保存按钮映射为全宽主色按钮加三元校验——设计稿底部深灰通栏按钮代码里用全宽按钮加地点非空的条件判断弹不同提示。这四组映射展示了录入页的完整翻译其中受控回显是本页区别于其他录入页的要点。十二、常见问题 FAQ问常用地点为什么用 地点的形式展示答 是定位图标前缀在地点前强化这是地理位置的语义——用户看到 自然联想到地点/定位比纯文字胶囊更直观。四个常用地点公司车库/万达广场/市医院/超市停车场覆盖了上班、购物、就医、采购四大停车场景是高频停车地点的典型集合。问入场时间和出场时间用 24 小时制还是 12 小时制答占位符展示的是 24 小时制14:30、16:45——24 小时制无歧义不会混淆上午下午、计算时长更直接16:45 - 14:30是国内停车场景的标准格式。产品化建议用时间选择器TimePicker代替手输从源头保证格式正确。问保存记录时金额填 0 会怎样答金额填 0 表示免费停车——保存后首页显示免费绿色标识不进入费用统计费用页只统计收费记录。如果用户没填金额空着当前演示不校验只校验地点产品化应区分填 0免费与没填费用未知费用未知的记录可提示补录。十三、补充要点记录页三个细节再思考第一关于受控回显的交互价值。TextInput({ text: this.place })让快捷胶囊点击的地点看得见——用户点公司车库后输入框立即显示公司车库确认无误再补时间费用这种点击即见的反馈避免了点了没反应的困惑是快捷录入可用性的关键。第二关于常用地点与手输的互补。常用胶囊覆盖高频地点一键填入输入框覆盖临时/新地点手动输入——两种录入方式互补既有速度又有灵活性产品化后新地点使用次数多了会自动加入常用列表。第三关于时间与费用的录入顺序。入场/出场并排在前、费用在后——按停车的自然顺序排列先记时间、再记费用用户填写时思维连贯什么时间停的、停了多久、花了多少比乱序字段更易填。十四、最后总结记录页是停车缴费记录的录入口。它用常用地点胶囊解决高频地点重复输入的痛点点击回填用四字段表单完成完整录入地点/入场/出场/费用用带校验的保存按钮保证记录有效地点必填。整页交互围绕录入效率展开快捷胶囊一键填入、受控回显所见即所得、双列时间并排填写、单一校验降低门槛。从演示到产品记录页的进化路线清晰短信解析自动生成、定位自动计时、多车车牌切换、票据拍照归档。十五、补充要点受控回填与常用地点的细节再思考本页的快捷胶囊 受控回填有几个细节值得再思考第一回填后的可编辑性——点击公司车库后地点填入输入框text: this.place用户仍可手动修改公司车库地下二层受控回显的可改特性让快捷与手输无缝衔接——如果只填不可改只读用户想补充细节就受限如果只手输无快捷高频地点就重复劳动。第二常用地点胶囊的选中反馈——点击胶囊后地点填入表单、Toast 提示公司车库双重反馈让用户明确已填入但胶囊本身没有选中态保持白底描边——因为常用地点是点击即用而非单选状态保持非选中视觉是正确的选中态语义会误导用户以为要选定。第三常用地点与费用统计的联动——常用地点中收费的公司/万达/医院会进入费用页的地点消费统计免费的超市不统计——用户在记录页点胶囊录入时这笔记录的费用决定了它是否进统计录入与统计的规则在记录页就已隐含。第四快捷胶囊的扩展性——常用地点由数组渲染新增地点只需追加数组条目产品化后由使用频率自动生成数据驱动快捷入口让常用地点列表可无限扩展而不改页面结构。这四个细节共同保证快捷录入既高效又灵活是记录页的核心交互亮点。十六、最后补充记录页解析至此完整收尾常用地点快捷胶囊、受控回填、四字段表单、保存校验全部覆盖。读者可重点回顾受控输入组件的写法文本参数回显加更改同步——这是快捷录入可见性的关键也是本页区别于其他录入页的核心实现。停车记录从这一页开始点一个常用地点、填两段时间、记一笔费用每一次出行停车的成本就这样被捕捉下来。补充说明记录页的四字段与首页的展示字段一一对应——停车地点对应地点名、入场出场对应时长、费用对应金额录入即展示数据模型前后贯通避免了两页字段口径不一致的常见问题。