鸿蒙原生应用 ArkTS 表单工程毕业寄语页的底部固定输入栏与发布校验App 44「校园纪念册」留言页Func2Tab主题色#A29BFE淡紫色lavender4 个 Tab 分别为首页、相册、留言、我的。留言页采用Header 寄语流 底部输入栏三区布局——白色单行 Header毕业寄语20 号加粗3 条毕业寄语 小林 / 阿强 / 小美每条含 44×44 淡紫圆底 emoji 头像 作者 时间 寄语全文卡片式底部固定输入栏42 高圆角 TextInput写下你的毕业寄语... 淡紫发布按钮发布校验请输入内容/留言成功顶部分隔线 安全区。本篇基于44-memorial-book/entry/src/main/ets/pages/Func2Tab.ets共 84 行逐段拆解附 4 张实机截图。一、整体结构三区Header 寄语流 底部输入栏布局留言页是品牌头部 寄语列表 固定输入栏的三区布局——这是系列首个聊天式页面列表 底部常驻输入:build() { Column() { this.Header() Scroll() { Column({ space: 12 }) { this.MessageList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 80 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) this.InputBar() } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构Header— 单行品牌头毕业寄语MessageList— 寄语列表Scroll 内底部 paddingsafeBottom 80为输入栏预留空间InputBar—底部固定输入栏在 Scroll 之外、Column 末尾常驻屏幕底部布局关键InputBar放在 Scroll之后Column 的最下层——ScrolllayoutWeight(1)占满剩余高度、输入栏固定底部形成上列表 下输入的聊天式布局列表底部safeBottom 80的 padding 确保最后一条寄语不被输入栏遮挡。这是系列中首个输入常驻的页面结构比 App 41/42/43 的表单在内容区更接近即时通讯/评论区的交互模型。项目源码开源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) }单行 20 号加粗、safeTop 56高度、白底、底部对齐——系列二级页统一范式。毕业寄语对应首页 Banner邀请同学一起添加照片和留言中的留言——留言即寄语是纪念册的情感层照片记录画面、留言记录心声。三、MessageList毕业寄语流MessageList() { Column({ space: 12 }) { ForEach(this.messages, (m: Message) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(22) } .width(44).height(44).backgroundColor(C.primarySoft).borderRadius(22).justifyContent(FlexAlign.Center) Column({ space: 6 }) { Row() { Text(m.author).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1) Text(m.time).fontSize(11).fontColor(C.textDim) }.width(100%) Text(m.content).fontSize(14).fontColor(C.text).lineHeight(22).width(100%) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }, (m: Message) m.id.toString()) }.width(100%) }3 条寄语21-25 行emoji作者内容时间小林四年时光转瞬即逝愿我们各自安好前程似锦2天前阿强感谢一路有你们这段友谊我会珍藏一辈子 ❤️3天前小美不说再见因为我们的故事还在继续。江湖再见5天前卡片细节头像44×44 淡紫圆底 22 号 emoji——作者的头像即情绪符号 温和 / 欢快 / 闪亮比真实头像更贴纪念册的怀旧氛围。头行作者 14 号 MediumlayoutWeight(1)占左 时间 11 号浅灰2天前/3天前/5天前倒序时间线。内容14 号lineHeight(22)全宽全文——毕业寄语不截断每条都完整读完愿我们各自安好前程似锦等文案充满毕业季的感怀。卡片样式白底圆角 20 描边 14 内边距space: 12间距——与系列卡片语言统一。keym.id.toString()稳定唯一。寄语内容分析三条寄语覆盖毕业情感的不同面向——前程似锦祝福未来、珍藏友谊感怀过去、江湖再见洒脱告别共同构成毕业季的情感全景也让留言页的文案真实动人。四、InputBar底部固定输入栏InputBar() { Row({ space: 10 }) { TextInput({ placeholder: 写下你的毕业寄语..., text: this.input }) .backgroundColor(C.cardSoft).borderRadius(20).height(42).layoutWeight(1) .onChange((v: string) { this.input v; }) Button(发布).fontSize(14).fontColor(#FFFFFF).backgroundColor(C.primary) .height(42).borderRadius(21) .onClick(() { promptAction.showToast({ message: this.input.length 0 ? 留言成功 : 请输入内容 }); }) } .width(100%).padding({ left: D.pad, right: D.pad, top: 10, bottom: this.safeBottom 10 }) .backgroundColor(C.card).border({ width: { top: 1 }, color: C.stroke }) }技术拆解圆角胶囊输入框42 高、圆角 20全圆角胶囊形、浅底——borderRadius(20)在 42 高上形成胶囊输入框与发布按钮同高同圆角视觉成对。TextInput 受控初值text: this.input——显式传入当前输入值配合onChange写回形成受控组件若未来点击头像预填等可借此回填与 App 43 发送页接收人回填同模式。发布按钮42 高圆角 21 胶囊、淡紫底白字——与输入框同尺寸并排右侧固定。分支校验this.input.length 0 ? 留言成功 : 请输入内容——与 App 41/42/43 同款三元校验空寄语拦截寄语必须有点内容才配得上纪念册。顶部分隔线border({ width: { top: 1 }, color: C.stroke })——输入栏与列表区的 1 高浅灰分隔明确输入区边界。安全区bottom: this.safeBottom 10——输入栏沉底时避让底部手势条保证输入框不被遮挡。新增寄语的链路State messages数组 发布成功应unshift新寄语新寄语置顶并清空输入——Demo Toast 占位数据层已就绪。五、跨页数据自洽留言页是纪念册的情感层留言页与首页、我的页的联动毕业寄语↔ 首页 Banner邀请同学一起添加照片和留言——Banner 引导的留言即本页寄语照片相册 留言寄语是纪念册的两大内容。留言作者↔ 首页纪念册成员——小林/阿强/小美是计科2022级班级的同学与首页 45 人的成员画像一致。我的页12 我的留言↔ 本页 3 条展示 历史留言——12 是个人累计留言数本页展示最近寄语。新增寄语↔ 我的页留言数 1——发布动作的数据闭环。六、实机截图与交互演示本节结合 4 张实机截图逐张还原留言页的视觉效果与交互过程。1. 留言页首屏寄语流 底部输入栏第一张截图是留言页默认首屏顶部毕业寄语标题下方第一条寄语卡—— 小林44×44 淡紫圆底头像 2天前 四年时光转瞬即逝愿我们各自安好前程似锦第二、三条 阿强 / 小美依次排列屏幕底部是固定输入栏——圆角胶囊 TextInput占位写下你的毕业寄语... 淡紫发布按钮顶部分隔线清晰可见。聊天式上列表 下输入的布局完整呈现。2. 点击寄语卡弹出内容 Toast第二张截图是点击第一条寄语卡后的反馈弹出四年时光转瞬即逝愿我们各自安好前程似锦Toast——onClick闭包捕获m.content点击哪条弹出哪条全文。整卡可点头像/作者/内容任意区域产品化后此处进入寄语详情回复/点赞。3. 点击发布空内容校验 Toast第三张截图是输入为空时点击底部发布按钮的反馈弹出请输入内容Toast——input.length 0为 false 走校验分支。空寄语被拦截用户得到明确引导去输入寄语流不会被空内容污染。4. 留言页完整视图三寄语 输入栏第四张截图是留言页的完整视图三条寄语全部可见 小林 2天前 / 阿强 3天前 / 小美 5天前时间倒序排列底部输入栏常驻。列表底部预留了safeBottom 80的空间最后一条寄语 小美不被输入栏遮挡Scroll 滚动与底部输入互不干扰。七、扩展思考评论区与留言的产品设计留言页是评论区的最小实现其设计可深入回复与点赞寄语支持回复作者与点赞——毕业寄语的互动让留言从单向寄语变成同学间的对话纪念册的留言墙因此活起来App 41 互动页的回复/赞模式可复用。寄语的时间线留言按时间倒序最新在前也可提供按届/按年份归档2022 级 vs 2023 级寄语——毕业寄语是分届的情感档案。置顶寄语班长/班主任寄语可置顶班主任寄语固定在顶部——纪念册的序言位比普通留言更有仪式感。寄语表情包输入支持插入表情/贴纸——毕业季寄语常用表情强化情感TextInput升级为富文本输入。寄语审核毕业寄语虽以善意为主仍需敏感词过滤——纪念册是永存的集体档案内容审核是底线。八、扩展思考底部输入栏的交互设计InputBar 是系列首个底部常驻输入其交互细节值得展开键盘弹出点击 TextInput 弹出软键盘时输入栏应跟随键盘上移系统默认且列表滚动到最底部让新输入可见——Scroll的滚动控制是聊天式页面的关键体验。受控 vs 非受控text: this.inputonChange写回是受控组件——若未来实现点击寄语 作者把 小林 预填进输入框受控模式让预填即时生效App 43 发送页回填同模式。发布后的滚动发布成功新寄语unshift置顶应自动滚动到顶部让用户看到自己的寄语——滚动联动是发布反馈的一部分。输入栏的占位切换聚焦时占位写下你的毕业寄语...、失焦恢复——placeholder自动处理无需额外代码。多行输入若寄语较长TextInput 可升级 TextArea自动增高但会压缩列表可视区——毕业寄语短而真挚单行足够本页选择合理。九、开发者视角留言页的调试与验证技巧底部 padding 与输入栏遮挡列表bottom: safeBottom 80的预留必须大于输入栏高度约 62 安全区——若改动输入栏高度记得同步调整 padding否则最后一条寄语被遮挡本页 80 预留验证正确。键盘弹起的列表滚动点击输入框键盘弹出后验证列表是否被压缩、能否滚动到最后一条——Scroll在键盘场景的可用性需真机验证系列高频坑。受控 TextInput 的循环text: this.input onChange 写回同一状态——确认无显示滞后/输入卡顿受控组件正常若异常检查是否 onChange 内重复赋值。校验分支测试空输入请输入内容与有输入留言成功两分支——重点测试先输入再清空的边界清空后回拦截分支。新寄语置顶的实现若实现发布后messages.unshift(newMsg)注意State数组需整体重赋值this.messages [newMsg, ...this.messages]才能触发刷新——系列 State 数组的经典坑。十、系列横向对比底部输入栏 vs 表单内输入App 44 留言页是系列首个底部固定输入栏与系列其他输入方式对比可看清选型逻辑输入形态代表页输入位置场景底部固定栏App 44 留言页常驻底部持续评论/留言表单卡片内App 42 树洞投稿内容区中部一次性提交列表内嵌App 38 技能发布滚动区短文本填写九宫格选择App 40 上传页顶部网格多图选择选型逻辑底部固定输入栏用于高频、持续的互动毕业寄语会反复添加、像发消息输入栏常驻让用户随时可写表单内输入用于低频、一次性的提交投稿一次即可输入区随内容流滚动。输入频率决定输入栏形态——评论区、聊天室用底部固定栏表单、投稿用内容区表单。与 App 41 互动页的对比App 41 互动页是收到的通知被动本页是主动写留言主动——同为 但方向相反本页的底部输入栏若与 App 41 的互动消息结合留言后可收到有人留言了你的通知即可构成留言 → 通知 → 回复的完整社交闭环。十一、扩展思考毕业寄语墙的集体情感设计留言页的寄语是纪念册的情感层其产品价值值得深入寄语的仪式感毕业寄语是在纪念册上留言的电子化——实体毕业纪念册上同学手写寄语是最珍贵的部分电子版应保留这种仪式感如发布时的落笔动画、寄语卡片的手写字体。寄语的排序当前时间倒序最新在前——也可提供按作者按热度点赞数排序班主任寄语可置顶纪念册的序言班长寄语次之——排序承载情感优先级。寄语的永久性毕业寄语是要留给多年后的自己看的内容——产品应承诺纪念册永久保存云存储 导出备份这是纪念册产品的信任底线。寄语与照片的呼应每条寄语可关联照片毕业合影旁配致我们的寄语——照片 寄语 人构成完整的回忆单元是纪念册区别于相册 留言分开的体验升级。多年后的重逢纪念册可设置毕业 N 周年解锁毕业后第 5 年/10 年推送该回母校看看了——时间胶囊式的纪念册让青春记忆在岁月中持续发酵是纪念册产品最具想象力的功能。十二、FAQ 与一句话总结Q1留言页为什么是底部固定输入栏布局留言是持续参与的互动像发消息输入栏常驻底部让用户随时可写、写完即发——比表单在内容区App 41/42更接近评论/聊天的心智模型。互动密度决定输入栏形态。Q2寄语和首页 Banner 的留言是一回事吗是——首页 Banner邀请同学一起添加照片和留言中的留言就是本页的毕业寄语照片相册 Tab记录画面、留言本页记录心声二者共同构成纪念册的内容。Q3发布寄语后能看到吗Demo 只弹 Toast留言成功。产品化后新寄语unshift置顶并滚动到顶部用户立即看到自己的寄语出现在列表——发布即可见是留言产品的信任基础。Q4为什么寄语不截断全文展示毕业寄语是情感内容每条都应完整可读与 App 41 帖子全文展示同理消息类的单行摘要App 41 互动页是通知场景寄语是内容场景场景决定是否截断。Q5输入框支持多行吗当前单行 TextInput——毕业寄语短而真挚一句话的祝福单行足够若未来支持长留言升级 TextArea 即可。一句话总结留言页以寄语流 底部固定输入栏完成了纪念册的情感层是系列首个聊天式布局列表 常驻输入。受控 TextInput 发布校验、safeBottom 80的输入栏避让、emoji 头像即作者情绪、三条寄语覆盖祝福/感怀/告别的毕业情感全景——84 行代码一个让同学留下心声的毕业寄语墙也是评论区类页面的标准参考。十三、开发者视角留言页的调试与验证技巧底部 padding 与输入栏遮挡列表bottom: safeBottom 80的预留必须大于输入栏总高约 62 安全区——若改动输入栏高度如加 emoji 按钮同步调整 padding否则最后一条寄语被遮挡本页 80 预留验证正确改动后需回归。键盘弹起的列表可用性点击 TextInput 键盘弹出后验证列表是否被压缩、能否滚动到最后一条、输入栏是否跟随键盘上移——聊天式页面的键盘适配需真机验证系列高频坑。受控 TextInput 的显示滞后text: this.input onChange 写回——确认输入无卡顿、显示无滞后若异常检查是否 onChange 内重复赋值造成死循环。校验分支测试空输入请输入内容与有输入留言成功两分支——重点测试先输入再清空的边界清空后应回拦截分支。新寄语置顶的实现发布后this.messages [newMsg, ...this.messages]整体重赋值触发刷新——不能push原地修改不触发 State这是系列 State 数组的经典坑。十四、FAQ 与一句话总结Q6寄语支持点赞和回复吗Demo 未实现。产品化后寄语卡加 点赞与回复按钮App 41 互动页模式回复形成寄语 → 回复的对话链——毕业寄语的互动让留言墙活起来。Q7班主任寄语能置顶吗可以——Message加isPinned字段置顶寄语固定在列表顶部类似置顶消息——纪念册的序言位比普通留言更有仪式感。Q8寄语会永久保存吗纪念册的产品承诺是永久保存——寄语云存储 可导出PDF/电子书多年后仍可回看这是纪念册产品含留言的信任底线。Q9输入框支持表情吗Demo 纯文本。产品化可在输入栏加按钮插入 emojiTextInput支持 emoji 输入——毕业寄语常配表情强化情感现有寄语已有 ❤️/。Q10发布寄语后会显示作者的真实身份吗当前寄语带作者名小林/阿强/小美——纪念册是实名集体产品不同于 App 41/42 匿名作者实名让寄语有人认领多年后看到小林写的更有回忆价值。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏寄语流底部输入栏、寄语点击内容 Toast、空内容发布请输入内容 Toast、完整视图三寄语输入栏四个状态底部固定输入栏、受控 TextInput、发布校验、safeBottom80 的输入栏避让均验证正常。寄语作者小林/阿强/小美为班级成员。整页 84 行代码完成寄语流 常驻输入的聊天式留言页验收通过可作为评论区/留言类页面的标准参考。补充一处细节留言页的寄语卡与首页纪念册卡、相册页照片卡共用白底圆角描边的卡片语言但头像区44×44 圆形淡紫底比纪念册封面80×90 直角图块更圆——因为寄语是人说的话圆形头像强调人的存在像聊天头像直角图块强调物的封面像书本封面圆即人、方即物的形态语义在三个页面间悄然统一。而底部输入栏的胶囊圆角输入框 20、按钮 21则是最圆的元素——输入是最亲近的互动用最圆润的形态降低开口说话的心理门槛与毕业寄语的温情场景相得益彰。这些圆方对照的细节虽小却让留言页在功能之外多了一层人味84 行代码的聊天式布局因此显得亲切而不冰冷。