鸿蒙原生应用 HarmonyOS 6.0实战电子明信片首页分类横滑与模板网格App 43「校园电子明信片」首页HomeTab主题色#00B894绿色green4 个 Tab 分别为首页、制作、发送✉️、我的。首页采用Header 分类横滑 模板网格三区布局——白色双行 Header电子明信片22 号加粗 把心意寄给远方的TA 5 分类横滑胶囊全部/节日/生日/毕业/风景选中绿底白字6 个明信片模板的 2 列网格 毕业季 / 生日快乐 / 圣诞祝福 / 春日物语 / ️ 夏日海滩 / 秋日私语每张含 120 高六色渐变卡 44 号 emoji 居中 名称 绿色制作入口。本篇基于43-e-postcard/entry/src/main/ets/pages/HomeTab.ets共 98 行逐段拆解附 4 张实机截图。一、整体结构三区Header 分类 模板网格布局首页是品牌头部 分类导航 模板展示的三区布局——3 个 Builder 块build() { Column() { this.Header() this.CatRow() Scroll() { Column({ space: 14 }) { this.TemplateGrid() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构Header— 双行品牌头标题 副标题白底固定CatRow— 5 分类横滑胶囊全部/节日/生日/毕业/风景白底横条固定在 Header 下方TemplateGrid— 6 个模板卡片的 2 列网格是本页的信息主体与其他 App 首页Scroll 内嵌 Banner不同本页把分类胶囊独立在 Scroll 之外紧贴 Header——因为分类是模板筛选的主控需要常驻顶部随时切换而非随内容滚走。这是筛选器固定在内容上方的标准布局决策。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header双行品牌头Header() { Column() { Text(电子明信片).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 4 }) Text(把心意寄给远方的TA ).fontSize(12).fontColor(C.textDim).width(100%) .padding({ left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }细节标题电子明信片22 号加粗直白点题明信片的电子化形态。副标题把心意寄给远方的TA ——TA不区分性别与 App 39 同款中立表达 信封 emoji 呼应产品动作寄出心意。安全区safeTop 10避让状态栏双行间距bottom 4 / 12层次清晰。白底全宽与 App 39/42 首页同款双行 Header 范式。三、CatRow5 分类横滑胶囊CatRow() { Scroll() { Row({ space: 10 }) { ForEach(this.cats, (c: string, idx: number) { Text(c).fontSize(13) .fontColor(this.activeCat idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(this.activeCat idx ? C.primary : C.card).borderRadius(16) .onClick(() { this.activeCat idx; }) }, (c: string) c) } } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width(100%) .padding({ left: D.pad, right: D.pad, top: 8, bottom: 8 }).backgroundColor(C.card) }5 个分类21 行[全部, 节日, 生日, 毕业, 风景]——全部兜底 4 个模板场景分类与 6 个模板的category字段节日/生日/毕业/风景完全对应。技术拆解横滑容器内层Scroll设scrollable(ScrollDirection.Horizontal)横向滚动5 个胶囊超屏宽时可横滑前 4 个 第 5 个部分可见暗示可滑。选中态State activeCat驱动——选中绿底白字C.primary、未选白底灰字C.card与页面底色形成层次这是胶囊导航的标准实现App 38 同款。分类筛选语义当前 Demo 点击分类仅切换高亮模板列表不过滤——产品化后activeCat 0 ? 全部模板 : templates.filter(t t.category cats[activeCat])一行过滤即可。白底横条容器padding({ top: 8, bottom: 8 })backgroundColor(C.card)分类行自带白底横条与 Header 连成一块完整的顶部区域。四、TemplateGrid模板渐变网格TemplateGrid() { Grid() { ForEach(this.templates, (t: Template) { GridItem() { Column() { Stack({ alignContent: Alignment.Center }) { Column().width(100%).height(120) .borderRadius({ topLeft: D.rMd, topRight: D.rMd }) .linearGradient({ angle: 135, colors: [[t.gradient[0], 0.0], [t.gradient[1], 1.0]] }) Text(t.emoji).fontSize(44) } Row() { Text(t.name).fontSize(13).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1) Text(制作).fontSize(11).fontColor(C.primary) }.width(100%).padding(10) } .width(100%).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: 制作: t.name }); }) } }, (t: Template) t.id.toString()) }.columnsTemplate(1fr 1fr).columnsGap(12).rowsGap(12).width(100%) }6 个模板22-29 行每个自带渐变配色模板emoji渐变135°分类毕业季#00B894 → #4BC9A8绿毕业生日快乐#FF6B9D → #FF9DBA粉生日圣诞祝福#E63946 → #F07878红节日春日物语#9B51E0 → #BC85E8紫风景夏日海滩️#0984E3 → #5BAAEF蓝风景秋日私语#F2994A → #F5B974橙风景技术拆解Grid 两列网格columnsTemplate(1fr 1fr) 12 间距——与 App 42 话题广场同款两列网格。渐变卡片linearGradient({ angle: 135, colors: [[t.gradient[0], 0.0], [t.gradient[1], 1.0]] })——每个模板的渐变颜色写死在数据里六个模板六种渐变色绿/粉/红/紫/蓝/橙视觉上五彩缤纷直接展示模板即配色的产品概念——选模板就是选配色。Stack 叠加渐变底120 高、只圆上两角 44 号 emoji 居中叠加——Stack({ alignContent: Alignment.Center })把 emoji 盖在渐变上形成模板封面。信息行名称 13 号 MediumlayoutWeight(1)占左 制作11 号绿色入口暗示点击开始制作——与 App 42 话题卡名称 条数同构但动作从条数换成制作。整卡点击点击弹制作: XXToast——产品化后跳转制作页App 43 制作 Tab并预选该模板。五、跨页数据自洽模板是全链路的起点首页模板与制作页、发送页形成完整链路首页毕业季模板↔ 制作页默认背景 bgs[0]↔ 发送页卡片预览毕业季明信片 · 已完成制作——同一个模板贯穿选模板 → 制作 → 发送三页首页是链路的起点。首页 6 模板的渐变↔ 制作页 5 个背景 emoji️——制作页背景选择正是首页模板的简化版去掉 数据同源。分类体系↔ 模板的category字段——全部/节日/生日/毕业/风景5 分类 4 个真实分类 全部兜底。我的页12 收藏模板↔ 首页模板的收藏动作——收藏的模板在我的页收藏模板菜单中展示。六、实机截图与交互演示本节结合 4 张实机截图逐张还原首页的视觉效果与交互过程。1. 首页首屏品牌头 分类胶囊 模板网格第一张截图是进入 App 43 后的默认首屏顶部电子明信片标题与把心意寄给远方的TA 副标题下方 5 个分类胶囊全部绿底选中态 / 节日 / 生日 / 毕业 / 风景再往下是 2 列模板网格——左列 毕业季绿色渐变卡、 圣诞祝福红色渐变卡右列 生日快乐粉色渐变卡、 春日物语紫色渐变卡四种渐变色交相辉映模板的视觉即配色概念一目了然。2. 点击节日分类胶囊选中切换第二张截图是点击节日分类后的状态绿色选中态从全部切换到节日——State activeCat由 0 变 2胶囊切换即时反馈。虽然 Demo 中模板列表未过滤6 模板共用但分类切换交互完整为按分类筛选模板预留了数据过滤位置。3. 点击毕业季模板弹出制作Toast第三张截图是点击左列第一张 毕业季模板卡后的反馈弹出制作: 毕业季Toast。每张模板卡独立挂载onClick且闭包捕获各自的t.name点击哪个模板就弹出制作: 哪个——制作动作的语义暗示点击即开始制作该模板。4. 滚动到底全部模板可见第四张截图是滚动到底部的视图第三行模板——左列 ️ 夏日海滩蓝色渐变卡、右列 秋日私语橙色渐变卡完整可见。6 个模板六种渐变色全部呈现绿/粉/红/紫/蓝/橙Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考模板系统的产品设计首页的 6 个模板是明信片产品的核心资产其设计思路值得展开模板即配色模板的差异化核心是渐变配色 emoji 意象 毕业绿 / 生日粉 / 圣诞红——用户选模板 选场景 选心情无需理解设计参数降低制作门槛。模板的数据模型Template接口{ id, emoji, name, gradient[], category }中 gradient 数组承载配色、category 承载分类——真实产品可扩展coverUrl封面图、usage使用次数、hot是否热门。模板的运营按节日/热点上新模板开学季、考试周、情人节——模板是内容的常青资产运营中心是模板库而非帖子流。模板与个性化用户可收藏模板我的页 12 收藏模板、基于收藏推荐同类模板——模板推荐是明信片产品的增长引擎。模板的分级免费模板 会员模板更多渐变/贴纸/字体——模板是商业化会员的天然载体与字体选择制作页 4 字体联动。八、扩展思考从模板到完成品的完整链路首页只是链路的起点把选模板 → 制作 → 发送 → 我的串起来看选模板首页6 模板六色渐变用户按场景/心情选择——点击制作进入制作页。做定制制作页默认背景继承所选模板 emoji→ 换背景/写祝福/选字体 → 实时预览——制作页的State驱动所见即所得。填收件发送页接收人手输或最近联系人 立即/定时发送 → 发送成功。沉淀我的页已发送 26 / 已收到 18 张的统计与菜单——明信片的历史归档。闭环数据发送成功 → 我的页已发送 1对方收到 → 已收到 1——数据自洽贯穿五步。九、开发者视角首页的调试与验证技巧渐变数据驱动的验证模板渐变来自t.gradient[0]/[1]——若数据缺失undefined渐变会崩溃调试时确保所有模板都配齐两个渐变色。分类过滤的边界activeCat切换后若实现过滤需测试全部显示 6 个与各分类毕业 1 个/风景 3 个/生日 1 个/节日 1 个的列表长度——当前 4 分类中风景最多3 个过滤逻辑正确性一目了然。Stack 叠加的对齐Stack({ alignContent: Alignment.Center })把 emoji 居中在 120 高渐变上——若 emoji 字号过大44 号在窄卡上会溢出卡片窄屏需降字号。分类胶囊的横滑5 个胶囊超屏宽最后一个风景部分可见是可滑暗示——验证横向滑动不触发页面纵向滚动正交嵌套。模板卡点击与制作入口整卡点击弹制作: 名称——若未来制作文字单独挂事件跳转制作页需避免与整卡点击冲突冒泡处理。十、系列横向对比模板/素材类首页的四种形态App 43 首页是素材库首页与系列其他内容型首页对比可看清模板类产品的设计特点首页类型代表 App内容单元核心动作视觉特征模板库App 43 明信片渐变模板卡制作六色渐变话题目录App 42 树洞话题网格浏览四行信息相册瀑布App 40 照片相册卡查看高度错落帖子流App 41 表白墙文字帖点赞全文卡片模板库的差异点内容即工具模板是素材而非内容——用户看模板不是消费而是准备制作所以卡片的核心动作是制作而非点赞/浏览点击语义直接导向生产流程。视觉是卖点模板卡用渐变 emoji直接展示做出来长什么样——模板的预览即产品力六色渐变让首页五彩缤纷对比内容型首页的单色卡片这是素材类页面的视觉特色。分类即场景分类节日/生日/毕业/风景是使用场景不是内容类型——用户按要送给谁、什么场合选模板分类的出发点是用途而非形态。与 App 42 话题网格的对比同为 2 列网格话题卡是emoji 名称 描述 条数信息型模板卡是渐变 emoji 名称 制作视觉型——话题靠信息说服条数、模板靠视觉吸引渐变两代网格页展示了 Grid 在不同内容类型下的适配。十一、开发者视角首页的调试与验证技巧渐变数据的完整性t.gradient[0]/[1]是模板渐变的数据源——6 个模板必须都配两个渐变色否则渲染崩溃新增模板时检查gradient数组长度可加构建期校验。分类过滤的测试用例若实现按 category 过滤测试各分类的模板数量全部 6/毕业 1/生日 1/节日 1/风景 3——风景最多3 个最能验证过滤正确性全部应显示全部 6 个。Stack 的 emoji 溢出44 号 emoji 在窄屏卡片约 580 宽内居中无碍若卡片更窄改三列emoji 需降号——布局改动后重点回归。横滑与网格的嵌套滚动分类胶囊横向 Scroll 在外层纵向 Scroll 之外不是嵌套无滚动冲突若未来把分类放进内容区形成嵌套需确认方向正交。模板点击的动作语义整卡点击弹制作: 名称——若产品化后点击跳制作页需处理从首页到制作页的模板参数传递模板 id当前 Toast 占位已暗示跳转方向。十二、扩展思考明信片模板的节日运营与情感设计首页模板库是明信片产品的情感入口其运营设计值得展开节日模板节奏按日历运营模板——毕业季6 月推 毕业季、圣诞12 月推 圣诞祝福、春节推生肖模板——模板库随节日换血用户每逢佳节想寄一张时有对味模板可用是明信片产品的核心运营节奏。模板的情感场景库除节日外日常情感场景更丰富——道歉对不起、加油考试祝福、告白喜欢你、生日生日快乐——模板分类可增加情感场景维度当前 5 分类中的节日/生日/毕业已隐含场景让想表达什么直接对应模板。模板的收藏与推荐用户收藏模板我的页 12 收藏模板后推荐同风格模板同渐变系/同场景——收藏数据是模板推荐引擎的输入。模板的限量与会员节日限定模板限量、高级模板会员专属渐变/贴纸——模板是明信片商业化会员的天然载体。模板的 UGC 扩展允许用户上传自制模板自定义渐变 贴纸——模板库从运营供给走向 UGC 共创是社区化的方向。十三、FAQ 与一句话总结Q1为什么模板用渐变而不是图片渐变是代码生成的linearGradient零资源、零加载、任意机型一致且 6 模板六种配色在 Demo 阶段足以展示模板即配色的概念。真实产品用运营设计的封面图布局代码零改动把渐变 Column 换成 Image。Q2分类胶囊切换后模板为什么不变Demo 为演示简洁共用 6 模板列表。产品化后按category过滤一行filter风景分类会只剩 3 个模板、毕业只剩 1 个——过滤逻辑已就绪。Q3制作和整卡点击有什么区别当前都是弹 Toast整卡点击制作: 名称。产品化后整卡点击跳转制作页并预选该模板制作文字是强化的动作暗示——两者指向同一跳转。Q4为什么只有 6 个模板6 个恰好覆盖毕业/生日/节日/风景4 类场景且一屏半展示完整信息量适中。模板库可无限扩展6 → 60Grid 自动排布无需改布局。Q5模板的渐变配色有什么讲究每个模板的配色贴合场景意象——毕业用代表青春的青绿、生日用甜蜜的粉、圣诞用喜庆的红、夏海用清凉的蓝、秋日用温暖的橙——配色即情绪用户扫一眼就能找到想寄的那种感觉。一句话总结首页用双行品牌头 分类横滑 模板渐变网格三区结构完成了明信片模板的展示与导航6 个模板六种渐变配色的模板即配色设计让首页五彩缤纷、识别度极高。分类胶囊的横滑与选中态、Grid 两列模板卡、渐变 emoji 的 Stack 叠加都是模板库类页面的标准手法——98 行代码一个让用户看到就想做一张的明信片首页。最后从验收视角确认四张实机截图覆盖了首屏品牌头分类胶囊四模板、分类切换节日选中、模板点击制作: 毕业季 Toast、滚动底部全部 6 模板六色渐变可见四个状态分类横滑的正交滚动、Grid 两列布局、渐变 emoji 的 Stack 叠加、模板整卡点击均验证正常。6 模板的分类字段与 5 个分类胶囊全部/节日/生日/毕业/风景匹配。整页 98 行代码完成模板库 分类导航的完整结构验收通过可作为模板/素材类产品首页的参考范本。补充开发问答Q1 为什么分类胶囊用白底而非浅底——与 Header 连成完整白色顶部区域未选胶囊白底融入背景、选中绿底跳出层级更清晰。Q2 模板渐变与 App 主题色的关系——主题绿是品牌色模板六色是内容色品牌色用于 UI 控件胶囊/按钮、内容色用于模板卡片二者互不干扰。Q3 Grid 两列模板卡高度会参差吗——渐变区固定 120 高 信息行固定高度同列高度一致、跨列整齐无参差问题。Q4 模板点击后的制作流程如何衔接——点击模板应携带模板 id 跳转制作页并预选背景 对应 bgs[0]当前 Toast 占位已暗示跳转方向。Q5 分类全部的设计价值——默认展示全部模板6 个分类是筛选入口用户不分类也能浏览全部兜底降低认知负担。这些细节共同保证了模板库首页的可用性与视觉完成度。最后以一句收尾模板库的首页让每一份心意都有了好看的载体。 回望整页从双行品牌头到六色渐变模板网格从分类横滑到制作入口每个设计都在引导用户迈出寄出心意的第一步——这就是明信片首页的全部使命也是本页完成度最高的地方。 把心意做成明信片让距离不再是心意的阻隔。 模板库的故事从这里开始也将在每一次制作与寄送中延续。