鸿蒙原生应用实战明信片制作页的实时预览卡与背景选择App 43「校园电子明信片」制作页Func1Tab主题色#00B894绿色green4 个 Tab 分别为首页、制作、发送✉️、我的。制作页采用Header 预览 背景 祝福语 字体 按钮六区布局——白色单行 Header制作明信片20 号加粗明信片实时预览卡200 高绿色渐变 64 号背景 emoji 祝福语文字实时渲染空时显示占位在此预览你的祝福语...背景选择卡️ 5 个 54×54 方块选中绿色描边 浅绿底祝福语卡90 高浅底 TextArea写下你的祝福...字体样式卡手写体/楷体/圆体/宋体 4 等分胶囊全宽绿色下一步 · 发送按钮Toast前往发送。本篇基于43-e-postcard/entry/src/main/ets/pages/Func1Tab.ets共 104 行逐段拆解附 4 张实机截图。一、整体结构六区Header 预览 背景 祝福 字体 按钮布局制作页是品牌头部 实时预览 四项定制 下一步的六区布局build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.Preview() this.BgCard() this.MsgCard() this.FontCard() Button(下一步 · 发送).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: 前往发送 }); }) } .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— 单行品牌头制作明信片Preview— 明信片实时预览State message驱动祝福语即时渲染BgCard— 5 个背景 emoji 选择State activeBgMsgCard— 祝福语 TextAreaState messageFontCard— 4 种字体选择State activeFont下一步按钮— 全宽绿色主按钮Toast前往发送三个Statemessage/activeBg/activeFont贯穿全页——预览卡同时消费 message 与 activeBg实现改背景即时变预览、打字即时变预览的所见即所得这是制作页的核心交互模式。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Preview明信片实时预览Preview() { Stack({ alignContent: Alignment.BottomStart }) { Column() { Text(this.bgs[this.activeBg]).fontSize(64) } .width(100%).height(200).borderRadius(D.rLg).justifyContent(FlexAlign.Center) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) Text(this.message.length 0 ? this.message : 在此预览你的祝福语...) .fontSize(16).fontColor(#FFFFFF).padding(16).maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width(100%) }技术拆解背景层绿色渐变#00B894 → #4BC9A8135°200 高圆角卡 64 号背景 emoji 居中——this.bgs[this.activeBg]随背景选择实时变化选中 预览即显示 。祝福语层Stack({ alignContent: Alignment.BottomStart })把文字左下对齐叠在渐变上明信片祝福语居下的版式——this.message.length 0 ? this.message : 在此预览你的祝福语...三元切换有内容显示真实祝福语、无内容显示灰色占位提示。文字样式16 号白色、maxLines(2) 省略号防溢出长祝福语截断、padding(16)与边缘留距。所见即所得State message与State activeBg双驱动——在祝福语框打字、在背景区选 emoji预览卡即时更新用户不需要预览按钮所见即所得是本页最大的交互亮点。三、BgCard5 背景 emoji 选择BgCard() { Column({ space: 10 }) { Text(选择背景).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 10 }) { ForEach(this.bgs, (b: string, idx: number) { Column() { Text(b).fontSize(26) } .width(54).height(54).justifyContent(FlexAlign.Center) .backgroundColor(this.activeBg idx ? C.primarySoft : C.cardSoft).borderRadius(D.rSm) .border({ width: this.activeBg idx ? 2 : 0, color: C.primary }) .onClick(() { this.activeBg idx; }) }, (b: string, idx: number) b idx) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }5 个背景15 行[, , , ️, ]——与首页模板的毕业季/生日快乐/春日物语/夏日海滩/秋日私语对应去掉圣诞制作页背景即首页模板 emoji 的复用。技术要点选中态双重表达选中背景浅绿底primarySoft2 宽绿色描边border({ width: 2, color: C.primary })未选中浅灰底无描边——底色 描边双重强化比单一生效更醒目App 42 心情卡用大小/透明度、本页用底色/描边选中态表达手段丰富。方块尺寸54×54 固定方块26 号 emoji 居中borderRadius(D.rSm)小圆角。key 防冲突(b: string, idx: number) b idx——emoji 数组可能重复时用索引拼接保证唯一系列标准写法。间距Row({ space: 10 })横向 10 间距5 个方块恰好一行排布。四、MsgCard祝福语 TextAreaMsgCard() { Column({ space: 10 }) { Text(祝福语).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) TextArea({ placeholder: 写下你的祝福... }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(90) .onChange((v: string) { this.message v; }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }浅底圆角输入C.cardSoft浅灰底 圆角 10 90 高——与 App 41/42 的透明沉浸式不同本页用可见输入框浅底圆角因为祝福语是填表性质短文本 有预览联动不需要沉浸感明确的输入框边界反而提示这里填祝福。占位文案写下你的祝福...直接、无歧义。实时联动onChange写入State messagePreview 的祝福语层即时更新——打字即预览。五、FontCard4 字体选择FontCard() { Column({ space: 10 }) { Text(字体样式).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 10 }) { ForEach(this.fonts, (f: string, idx: number) { Text(f).fontSize(13) .fontColor(this.activeFont idx ? #FFFFFF : C.textSub) .textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 9, bottom: 9 }) .backgroundColor(this.activeFont idx ? C.primary : C.cardSoft).borderRadius(D.rSm) .onClick(() { this.activeFont idx; }) }, (f: string) f) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }4 种字体16 行[手写体, 楷体, 圆体, 宋体]——中文场景的四类字体风格。技术要点等分胶囊每个 TextlayoutWeight(1)四等分整行textAlign(TextAlign.Center)居中选中绿底白字、未选浅底灰字——与背景选择方块不同字体选择是胶囊条两种选择器形态在同页并存方块 视觉选择、胶囊 文本选择选型贴合内容类型。Demo 简化当前切换仅高亮、预览文字字体未实际变化——真实产品应给 Preview 的祝福语 Text 应用fontFamily属性手写体/楷体等Demo 保留了选择结构、字体渲染需系统字体支持。key(f: string) f字体名唯一。六、下一步按钮Button(下一步 · 发送).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: 前往发送 }); })文案下一步 · 发送明确这是向导的下一步比完成更引导流程——制作页与发送页构成两步向导按钮衔接两页。Toast前往发送Demo 占位产品化后router跳转发送页发送页卡片预览展示毕业季明信片 · 已完成制作承接制作成果。无校验祝福语可空预览显示占位——明信片允许只发背景图设计上不强制填字。七、跨页数据自洽制作页承上启下制作页是选模板 → 制作 → 发送链路的中间环节承接首页首页点制作: 毕业季应跳转本页并预选 背景——bgs[0] 与首页毕业季模板 emoji 一致数据同源。衔接发送页制作成果背景 祝福语 字体随下一步 · 发送传递到发送页——发送页卡片预览毕业季明信片 · 已完成制作正是制作页默认成果的展示。背景与首页模板5 个背景 emoji️ 首页 6 模板中的 5 个 emoji去 ——制作页背景即模板的定制层。我的页我的作品菜单↔ 制作页成果——制作完成的明信片保存在我的作品中可复用/再编辑。八、实机截图与交互演示本节结合 4 张实机截图逐张还原制作页的交互链路。1. 制作页首屏预览卡 背景选择第一张截图是制作页默认首屏顶部制作明信片标题下方 200 高绿色渐变预览卡——64 号 居中、左下角白色占位文字在此预览你的祝福语...再往下是选择背景卡——5 个 54×54 方块️第一个 为浅绿底 绿色描边选中态祝福语卡90 高浅底输入框与字体样式卡手写体/楷体/圆体/宋体第一个选中部分可见。所见即所得的预览卡是整页视觉焦点。2. 点击背景预览 选中切换第二张截图是点击背景选择第二格后的状态预览卡中央的 emoji 从 变为 64 号即时更新背景方块的选择态从第一格切换到第二格浅绿底 绿描边——State activeBg驱动预览 emoji 选择框双处同步更新所见即所得的核心交互得到验证。3. 点击楷体字体选中切换第三张截图是点击字体样式第二格楷体后的状态绿色选中态从手写体切换到楷体——State activeFont由 0 变 1。四个字体胶囊等分整行各约 1/4 屏宽选中绿底白字与未选浅底灰字对比清晰。4. 点击下一步 · 发送流程衔接 Toast第四张截图是滚动到底部、点击全宽绿色下一步 · 发送按钮后的反馈弹出前往发送Toast。按钮位于页面底部祝福语卡与字体卡之后下一步的向导语义明确——产品化后此处跳转发送页承接制作成果。九、扩展思考所见即所得的编辑器设计制作页的预览实时联动是编辑器类页面的核心模式值得展开状态单一来源State message/activeBg/activeFont三个状态是编辑器的文档模型预览卡只是它们的渲染投影——任何一处修改预览自动更新无需手动刷新预览按钮。这是 MVVM 思想的最小实践。预览的性能每次打字onChange 高频触发都重绘预览——Demo 内容轻量无压力若未来预览含大图/动画需防抖300ms合并渲染。字体的真实渲染Demo 只切换高亮产品化后 Preview 的祝福语fontFamily应跟随activeFont——需系统安装对应字体手写体/楷体等或使用内置字体资源。背景的扩展背景从 5 emoji 扩展为渐变库 图片库 贴纸库——activeBg从索引升级为对象{ type: emoji|gradient|image, value: ... }预览层按 type 分支渲染。撤销重做编辑器标配 CtrlZ 撤销——把三个 State 收进历史栈每次修改 push 快照是编辑器产品化的进阶能力。十、开发者视角制作页的调试与验证技巧预览与状态的一致性改背景/打字后用 dumpLayout 确认预览卡的 emoji 与文字确实更新——状态变了但预览没变通常是 onChange 未正确写入 State检查赋值。maxLines 的预览截断祝福语超过 2 行时预览省略——验证长文本的省略位置与占位 → 真实文字的切换边界空内容显示占位、非空显示内容。背景选中态的描边border({ width: 2, color: C.primary })只在选中时存在——切换时描边出现/消失会引起 1-2px 的视觉跳动方块大小变化若介意可改为始终透明描边 选中变色。emoji key 的稳定性b idx的 key 在静态数组下正确若未来支持增删背景改用 id 防重排重建。键盘遮挡点击 TextArea 弹键盘压缩可视区下一步 · 发送按钮被顶出——expandSafeArea或滚动适配系列高频坑真机验证键盘弹出场景。十一、系列横向对比编辑器类页面的四层架构制作页是编辑器类页面其架构可作为系列乃至所有编辑器产品的参考层级本页实现产品化演进画布预览Preview 渐变卡可缩放画布/多模板属性面板Bg/Font 选择卡颜色/贴纸/滤镜库输入层MsgCard TextArea富文本/表情/模板句动作层下一步按钮保存草稿/导出图片/分享编辑器的核心是状态即文档本页三个 State 就是明信片文档的全部字段背景/祝福/字体预览卡是文档的渲染——任何编辑器哪怕是 Photoshop的本质都是操作状态 → 渲染预览本页用 100 行代码演示了这个最小模型。产品化时把三个 State 收拢为Observed class Postcard对象含 id/模板/背景/祝福/字体/创建时间即可支撑草稿保存、作品列表、继续编辑等完整功能——制作页是编辑器的最小可行示例。与系列其他表单页的对比App 41/42 的表单是填完提交一次性制作页是边填边看实时预览——编辑器的差别在于预览层的存在。若 App 41 的发布页也加一个帖子预览卡所见即所得即可升级为编辑器型发布这是 UGC 产品提升体验的常见路径。十二、开发者视角制作页的调试与验证技巧预览联动验证改背景后确认预览 emoji 更新、打字后确认预览文字更新——用 dumpLayout 检查两个状态是否同时反映若预览不更新第一排查onChange是否写入 State检查赋值与引用。占位/真实文字的边界message.length 0切换占位与真实文字——测试空、1 字、超 2 行三种情况确认省略号与占位消失的边界正确。选中描边的视觉跳动border({ width: 2 })选中出现/未选消失会引起 1-2px 尺寸变化——若视觉敏感改为始终 2 宽透明描边 选中变色尺寸恒定。emoji keyb idx静态数组下正确若未来支持用户自定义背景增删数组改用 id 防重排重建。字体渲染的真实性Demo 只切高亮未应用字体——产品化时确认系统字体资源手写体/楷体等是否可用不可用则用内置字体文件避免预览与实际不符。十三、扩展思考明信片制作的情感化与模板句制作页的祝福语输入可进一步情感化模板句库提供常用祝福句一键插入祝你生日快乐毕业快乐前程似锦——降低不知写什么的门槛模板句是明信片产品的情感效率工具。祝福语的字数体验当前 TextArea 无字数上限——明信片讲究短而真挚产品化可设 100 字上限 计数参考 App 42 树洞的 0/1000引导克制表达。字体与情绪的匹配手写体适合温情祝福、楷体适合正式师恩、圆体适合可爱朋友、宋体适合雅致风景——字体选择与情感场景的匹配建议在产品中给出场景推荐。背景与祝福的联动选 背景时推荐生日祝福模板句、选 推荐毕业祝福——背景 emoji 已隐含场景联动推荐降低选择成本。预览的情感反馈明信片制作完成后可加寄出前的心动确认预览 就它了强化心意已就绪的仪式感——与发送页已完成制作绿色状态衔接。十四、FAQ 与一句话总结Q1为什么祝福语不强制填写明信片允许只发背景 emoji的极简形式预览占位提示而非拦截降低发送门槛App 41/42 的请输入内容拦截是针对内容为主体的 UGC明信片的主体是模板心意填不填字是用户自由。Q2预览卡的字体为什么没变Demo 的字体选择只切高亮fontFamily未实际应用需系统字体支持。产品化后给预览 Text 绑定字体即可选择结构已就绪。Q3背景选择为什么是方块而不是胶囊背景是视觉内容emoji 图案方块54×54像色卡/图案块更贴合视觉选择字体是文本选项胶囊等分条更像按钮。选择器形态贴合选项的感知类型是本页的设计细节。Q4制作页和首页模板什么关系首页是选模板6 个渐变模板制作页是做定制在模板基础上换背景/写祝福/选字体——首页点制作跳转本页并预选对应背景制作成果流向发送页。三页构成选 → 做 → 发的完整向导。Q5为什么按钮叫下一步 · 发送而不叫完成制作只是流程的第一步后面还有发送页——下一步明确指示流程方向向导语义比完成更准确引导用户继续而非结束。一句话总结制作页以实时预览 背景选择 祝福语输入 字体选择完成了明信片定制的最小闭环。所见即所得的预览联动State双驱动、背景的底色 描边双重选中态、字体/背景两种选择器形态的差异化设计都是编辑器类页面的标准手法——104 行代码一个改什么都能即时看到的明信片制作台也是系列中实时预览体验最完整的页面。最后从验收视角确认四张实机截图覆盖了首屏预览卡背景选择、背景切换 预览即时更新、字体切换楷体选中、下一步按钮前往发送 Toast四个状态所见即所得的预览联动背景 emoji 与预览同步、祝福语实时渲染、背景底色描边双重选中态、字体胶囊等分选择均验证正常。跨页数据自洽通过核对——制作页 5 背景 emoji️与首页 6 模板中的 5 个 emoji 一致默认背景 对应首页毕业季模板与发送页成果卡制作成果背景祝福语字体随下一步 · 发送流向发送页。整页 104 行代码完成实时预览 四项定制的编辑器最小闭环验收通过可作为所见即所得编辑器的参考范本。补充开发问答Q1 预览卡为什么要放在最上方——编辑器先看结果再改参数的心智模型预览置顶让用户每次修改都即时看到效果若参数在预览上方改完要滚动回顶部看效果体验割裂。Q2 背景选择的选中态为什么用描边——描边2 宽绿边在浅色方块上醒目且不改变底色语义primarySoft 浅绿底 绿描边双重提示比纯底色更清晰。Q3 祝福语最多显示几行——预览maxLines(2)两行省略长祝福语截断但完整内容在明信片中仍完整预览是效果示意非内容截断。Q4 下一步按钮为什么不做校验——明信片允许只发背景祝福可空预览占位已提示在此预览你的祝福语无需强制接收人校验在发送页负责发送页请填写接收人。Q5 字体选择产品化后如何真正生效——给预览 Text 绑定fontFamily并在资源目录放置四种字体文件手写体/楷体/圆体/宋体选择即切换当前结构已预留。所见即所得的核心就是状态与渲染的即时绑定。最后以一句收尾制作者的点滴定制都在预览中即时绽放。 回望整页从实时预览到背景/祝福/字体三项定制从状态驱动的所见即所得到下一步的流程衔接每个设计都在让把心意做出来变得简单而愉悦——这就是制作页的全部价值也是编辑器类页面的最小范本。每一次定制都是心意的具象化每一张预览都是温暖的彩排。