鸿蒙原生应用 ArkTS 表单工程明信片发送页的接收人输入与最近联系人App 43「校园电子明信片」发送页Func2Tab主题色#00B894绿色green4 个 Tab 分别为首页、制作、发送✉️、我的。发送页采用Header 成果卡 接收人 最近联系人 发送方式 按钮六区布局——白色单行 Header发送明信片20 号加粗成果预览卡80×80 绿色渐变 缩略 毕业季明信片加粗 绿色已完成制作状态接收人卡44 高浅底 TextInput输入接收人姓名或账号最近联系人卡 妈妈/ 李老师/ 室友小张/ 同学小美 4 个头像点击填入接收人 Toast选择: XX发送方式卡立即发送/定时发送 2 等分胶囊全宽绿色发送明信片 按钮接收人为空 Toast请填写接收人、非空发送成功。本篇基于43-e-postcard/entry/src/main/ets/pages/Func2Tab.ets共 113 行逐段拆解附 4 张实机截图。一、整体结构六区Header 成果 接收人 最近 方式 按钮布局发送页是品牌头部 成果确认 收件人填写 发送设置 提交的六区布局build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.CardPreview() this.ReceiverCard() this.RecentCard() this.ModeCard() Button(发送明信片 ).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.receiver.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) }6 块结构Header— 单行品牌头发送明信片CardPreview— 制作成果确认卡毕业季明信片 · 已完成制作ReceiverCard— 接收人 TextInputState receiverRecentCard— 最近联系人点击回填接收人ModeCard— 立即/定时发送State sendMode发送按钮— 全宽绿色主按钮按接收人是否为空分支反馈两个Statereceiver/sendMode贯穿全页——接收人是校验核心空则拦截发送方式是扩展设置。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、CardPreview制作成果确认卡CardPreview() { Row({ space: 14 }) { Column() { Text().fontSize(40) } .width(80).height(80).borderRadius(D.rMd).justifyContent(FlexAlign.Center) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) Column({ space: 4 }) { Text(毕业季明信片).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Text(已完成制作).fontSize(12).fontColor(C.ok) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解成果缩略80×80 绿色渐变方块 40 号 ——承接制作页的成果默认背景 是要寄的东西的视觉确认。状态文字毕业季明信片15 号加粗 已完成制作12 号绿色C.ok——已完成制作用绿色传达一切就绪可以寄出的正向信号与发送按钮的绿色呼应。信息架构左缩略右描述layoutWeight(1)撑开让用户在发送前最后确认寄的是什么——发送前确认是工具类产品的必要环节。三、ReceiverCard接收人输入ReceiverCard() { Column({ space: 10 }) { Text(接收人).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) TextInput({ placeholder: 输入接收人姓名或账号 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.receiver v; }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }单行 TextInput44 高浅底圆角单行输入——接收人是短文本姓名/账号用单行输入框区别于制作页的多行 TextArea。占位文案输入接收人姓名或账号——两种收件标识都支持提示明确。onChange 写入State receiver实时更新供校验与最近联系人回填使用。校验核心receiver.length是发送按钮分支判断的输入源——空则请填写接收人。四、RecentCard最近联系人点击回填RecentCard() { Column({ space: 10 }) { Text(最近联系人).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 12 }) { ForEach(this.recent, (c: Contact) { Column({ space: 6 }) { Row() { Text(c.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.cardSoft).borderRadius(24).justifyContent(FlexAlign.Center) Text(c.name).fontSize(11).fontColor(C.textSub).maxLines(1) }.onClick(() { this.receiver c.name; promptAction.showToast({ message: 选择: c.name }); }) }, (c: Contact) c.id.toString()) }.width(100%).justifyContent(FlexAlign.SpaceBetween) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }4 位最近联系人22-27 行 妈妈家人/ 李老师老师/ 室友小张朋友/ 同学小美同学——覆盖家人/老师/朋友/同学四类收件场景。技术拆解头像 名称48×48 浅灰圆底 24 号 emoji 头像下方 11 号名称maxLines(1)防溢出Column({ space: 6 })上下组合。点击回填onClick(() { this.receiver c.name; ... })——点击联系人直接把名字写入接收人输入框State receiver驱动 TextInput 显示同时 Toast选择: 妈妈确认——这是快捷回填的标准交互省去手打姓名。SpaceBetween 均布justifyContent(FlexAlign.SpaceBetween)让 4 位联系人等距分布整行——Row({ space: 12 })间距 两端对齐。keyc.id.toString()稳定唯一。五、ModeCard立即/定时发送ModeCard() { Row({ space: 10 }) { ForEach(this.modes, (m: string, idx: number) { Text(m).fontSize(13) .fontColor(this.sendMode idx ? #FFFFFF : C.textSub) .textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 11, bottom: 11 }) .backgroundColor(this.sendMode idx ? C.primary : C.card).borderRadius(D.rSm) .border({ width: 1, color: this.sendMode idx ? C.primary : C.stroke }) .onClick(() { this.sendMode idx; }) }, (m: string) m) }.width(100%) }2 种发送方式21 行[立即发送, 定时发送]。技术要点等分胶囊两个 TextlayoutWeight(1)平分选中绿底白字 绿色描边、未选白底灰字 浅灰描边——选中态底色 描边双表达与背景选择同款手法。定时发送的语义选中定时发送产品化后应弹出时间选择器DatePicker/TimePicker设定未来时间投递——本页保留选择结构定时 UI 是扩展点。发送方式的联动发送按钮文案可随方式变化立即发送vs预约发送——当前统一发送明信片 联动是产品化小事。六、发送按钮与校验Button(发送明信片 ).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.receiver.length 0 ? 发送成功 : 请填写接收人 }); })按钮文案发送明信片 ——动作 品牌 emoji 强化寄出心意的情感。分支校验receiver.length 0 ? 发送成功 : 请填写接收人——与 App 41/42 同款三元校验接收人为空拦截明信片必须有人收。产品化链路发送成功应把明信片模板 背景 祝福语 字体 接收人提交服务端 → 我的页已发送 1 → 若为定时发送则进入定时队列——当前分支反馈已预留。七、跨页数据自洽发送页是链路的出口发送页完成选模板 → 制作 → 发送的最后一环成果卡毕业季明信片↔ 首页毕业季模板 ↔ 制作页默认背景 ——三页同一模板发送页是最终出口。已完成制作状态↔ 制作页下一步 · 发送——制作完成才进入发送页状态衔接自然。发送成功 → 我的页26 已发送——发送动作的累计统计。最近联系人↔ 我的页/通讯录——联系人是长期数据我的页可管理增删联系人。定时发送↔ 发送成功后的延迟投递——数据链路扩展点。八、实机截图与交互演示本节结合 4 张实机截图逐张还原发送页的交互链路。1. 发送页首屏成果卡 接收人 最近联系人第一张截图是发送页默认首屏顶部发送明信片标题下方成果卡——80×80 绿色渐变 缩略 毕业季明信片加粗 绿色已完成制作接收人卡44 高浅底输入框占位输入接收人姓名或账号最近联系人卡—— 妈妈 / 李老师 / 室友小张 / 同学小美 四个头像等距排布再往下是立即发送 / 定时发送第一个绿色选中与底部绿色发送明信片 按钮。2. 点击妈妈接收人回填 Toast第二张截图是点击最近联系人第一位 妈妈后的反馈弹出选择: 妈妈Toast——State receiver被写入妈妈接收人输入框随之回填截图可见输入框显示妈妈。快捷回填免去手打姓名是发送类页面的关键效率交互。3. 点击定时发送方式切换第三张截图是点击定时发送后的状态绿色选中态从立即发送切换到定时发送绿底白字 绿描边——State sendMode由 0 变 1。发送方式的选择结构完整为设定未来时间投递的定时功能预留了位置。4. 点击发送明信片校验 Toast第四张截图是接收人为空未选联系人时点击发送明信片 按钮的反馈弹出请填写接收人Toast——receiver.length 0为 false 走校验分支。无效发送被拦截用户得到明确引导手输或点联系人明信片不会无处可寄。九、扩展思考定时发送与投递设计定时发送是本页的特色扩展其产品设计值得展开定时场景生日祝福零点送达、考试日鼓励早晨到达、纪念日准点寄出——定时让明信片在该到的时刻到情感价值倍增。时间选择 UI定时发送选中后弹出DatePicker日期TimePicker时间选完显示将于 X月X日 20:00 发送确认文案——把抽象设定转化为明确承诺。投递状态机明信片的生命周期草稿 → 待发送 → 已发送/已投递 → 已读——定时发送处于待发送队列我的页已发送展示投递状态含定时任务管理改期/取消。时区处理定时必须按接收人时区投递异地亲友——ohos.i18n时区转换是定时功能的隐藏难点。推送提醒定时投递成功可推送通知你的明信片已送达 ——闭环的最后一环与鸿蒙推送服务对接。十、开发者视角发送页的调试与验证技巧回填的联动验证点联系人后确认接收人输入框确实显示名字State receiver驱动 TextInput——若 TextInput 显示不更新检查是否用value: this.receiver绑定而非仅 onChange 监听本页是受控/非受控混合的简化产品化建议受控绑定。校验分支测试分别测试空接收人 点击请填写接收人与回填后 点击发送成功两条路径——确认分支判断读取的是同一 receiver 状态源。SpaceBetween 的均布justifyContent(FlexAlign.SpaceBetween)在 4 个联系人时两端对齐、中间均布若增删联系人3 个/5 个均布依然成立但名称过长会挤压——maxLines(1)已兜底。定时发送的边界若实现定时需校验时间必须晚于当前选过去时间应提示——定时逻辑的基础校验。键盘与按钮接收人 TextInput 弹键盘压缩可视区发送按钮可能被顶出——expandSafeArea或滚动适配系列高频坑。十一、系列横向对比发送/交付类页面的三种形态发送页是交付类页面与系列其他出口页面对比可看清设计差异交付类型代表 App收件对象核心动作校验字段明信片投递App 43 发送页接收人姓名发送接收人必填照片上传App 40 上传页相册/活动上传照片数技能发布App 38 发布页平台广场发布技能名称表白发布App 41 发布页匿名墙发布内容非空发送页的差异点对象是特定的人明信片寄给妈妈/李老师指定收件人而发布类内容寄给广场平台所有人——所以发送页有接收人与最近联系人是系列中唯一需要收件人地址的页面这是传递型产品点对点与发布型产品点对面的本质区别。联系人快捷回填最近联系人点击填入接收人是点对点场景的效率刚需反复寄给同一批人——发布型产品没有此需求不需要指定收件人这是本页区别于所有发布页的独有交互。定时发送明信片可定时投递零点祝福/纪念日——定时是传递型产品的情感能力让心意在该到的时刻到发布型产品很少需要。双向数据发送后进入已发送对方收到进入已收到——双向档案我的页 26/18是传递型产品的数据特征。十二、开发者视角发送页的调试与验证技巧回填的受控性点击联系人后State receiver更新TextInput 显示应同步——若 TextInput 不显示回填值改用value: this.receiver受控绑定本页简化版依赖状态驱动产品化建议显式受控。校验分支测试空接收人请填写接收人与回填后发送成功两分支——重点验证先点联系人再清空的边界清空后 receiver 为空应回拦截分支。SpaceBetween 的均布4 联系人两端对齐均布3 或 5 个时均布仍成立但名称可能挤压——maxLines(1)已兜底长名称室友小张在窄卡上注意省略。定时时间校验若实现定时必须校验所选时间晚于当前过去时间应提示重选——定时功能的隐藏边界。键盘适配接收人 TextInput 弹键盘压缩可视区发送按钮被顶出——expandSafeArea或滚动适配系列高频坑真机验证键盘弹出场景。十三、扩展思考明信片的送达与情感闭环发送页是投递动作而明信片的完整情感体验在送达送达通知明信片送达接收人后发送方可收到TA 已收到你的明信片 通知——投递闭环让发送方知道心意已到达我的页已发送可显示已送达状态角标。接收体验接收方打开明信片有拆信封仪式封面 → 开启动画 → 祝福语——接收的仪式感决定明信片的情感价值是产品体验的高光时刻。回信机制接收方可回寄一张一键跳转制作页复用发送方模板——回信让明信片从单向投递变为双向对话是传递型产品的互动升级。明信片的收藏价值收到的好看明信片可收藏我的页已收到支持收藏——明信片成为收到的温暖收藏品长期留存。隐私与可见性明信片仅收件人可见点对点隐私——与发布型产品的公开内容不同明信片的私密投递是产品信任的基础隐私设置我的页设置应明确管理。十四、FAQ 与一句话总结Q1为什么发送页有成果卡确认发送前确认寄的是什么是工具类产品的必要环节——成果卡让用户最后看一眼毕业季明信片 · 已完成制作避免寄错东西的尴尬也承接制作页的成果形成流程连续性。Q2最近联系人点击后输入框真的回填了吗是的——onClick里this.receiver c.name写入StateTextInput 显示随之更新截图 2 可见妈妈回填。这是快捷回填的标准交互免去手打。Q3定时发送现在能定时间吗Demo 只做了方式切换高亮未实现时间选择 UI。产品化后选中定时发送弹出日期时间选择器即可选择结构已就绪。Q4发送成功后的明信片去哪了Demo 只弹 Toast。产品化后进入我的页已发送列表26 已发送 1接收人收到后在已收到出现——发送与接收的数据闭环是明信片产品的核心。Q5为什么接收人必须填明信片必须有收件对象——空接收人发送是无效操作所以校验拦截请填写接收人。这与 App 41/42 的内容为空拦截同理关键字段必填校验是表单类页面的底线。一句话总结发送页以成果确认 接收人输入 联系人回填 发送方式 校验提交完成了明信片投递的最小闭环。最近联系人的点击回填是高效的效率交互、已完成制作的绿色状态与发送明信片 按钮形成一切就绪的正向闭环、接收人必填校验守住投递底线——113 行代码一个完整可验证的明信片发送流程。最后从验收视角确认四张实机截图覆盖了首屏成果卡接收人最近联系人、联系人选择妈妈回填 Toast、定时发送切换、空接收人校验请填写接收人 Toast四个状态成果确认卡、接收人输入、最近联系人点击回填、立即/定时发送切换、接收人必填校验均验证正常。最近联系人妈妈/李老师/室友小张/同学小美覆盖家人/老师/朋友/同学四类收件场景。整页 113 行代码完成成果确认 → 填写收件 → 选择方式 → 校验提交的投递闭环验收通过可作为点对点投递类页面的参考范本。补充开发问答Q1 接收人输入与最近联系人点击会冲突吗——不会联系人点击写入State receiver回填输入框手输则覆盖两条路径统一收敛到同一状态互斥且无冲突。Q2 为什么最近联系人不带更多入口——4 个联系人恰好一行SpaceBetween 均布更多联系人在产品化后由通讯录菜单我的页管理发送页只展示高频 4 人。Q3 定时发送的 UI 藏在哪——选中定时发送后弹出日期时间选择器DatePicker/TimePicker当前仅切换高亮选择结构已就绪定时 UI 是明显扩展点。Q4 发送按钮的 emoji 有什么作用——强化寄出心意的情感动作让发送从冷冰冰的操作变成有温度的交付与头像 、Tab 的品牌符号体系呼应。Q5 发送成功后页面状态如何处理——应清空接收人、Toast发送成功、跳转我的页已发送26 1发送即归档避免重复发送。发送页的每条交互都指向心意准确送达的目标。最后以一句收尾每一次投递都是心意跨越距离的抵达。 回望整页从成果确认到接收人填写从联系人回填到定时发送从校验拦截到发送成功每个设计都在确保心意准确、及时、体面地送达——这就是发送页的全部价值也是点对点投递类页面的标准参考。 按下发送的那一刻心意便开始了它的旅程。 投递的终点是感动而旅程的起点正是这小小的发送页。