21 PosterTemplate 分享海报主题系统与排版设计前言图21 PosterTemplate 分享海报主题系统与排版设计 运行效果截图HarmonyOS NEXT在社交分享场景中海报生成是连接应用内数据与外部传播的关键一环。一张设计精美的海报不仅能传递信息还能塑造品牌形象。ArkUI 的组件化能力让海报模板的设计变得可配置和可复用。本文以鹿鹿·笔迹心理分析项目中的 [PosterTemplate.ets](file:///Users/fiona/Downloads/bijixinli/harmony-app/entry/src/main/ets/common/components/PosterTemplate.ets) 分享海报模板为例深入解析 ArkUI 中海报组件的设计思路——从多主题系统到引号排版从标签胶囊到二维码占位。鸿蒙官方·Text 组件developer.huawei.com项目源码仓库harmony-app GitHub图PosterTemplate 三套主题——warm米黄暖橙/ quiet柔蓝沉静/ rose玫瑰粉柔warmquietrosePosterTemplatetemplateId米黄背景 暖橙引号柔蓝背景 沉静蓝引号玫瑰粉背景 玫瑰粉引号getTheme 返回 ThemeColors海报四段布局品牌区 Row引号区 Column layoutWeight 1底部信息区二维码区 Row一、海报组件的整体设计1.1 组件接口PosterTemplate 定义了完整的接口体系——支持 3 种主题预设由父组件传入内容数据和尺寸// 主题类型联合类型exporttypePosterTemplateIdwarm|quiet|rose// 主题色接口interfaceThemeColors{bg:string// 背景色mark:string// 强调色引号颜色accent:string// 强调色文字标签颜色tagBg:string// 标签背景色}// 内容数据接口exportinterfacePosterContent{name:string// 用户名personalityType:string// 人格类型如温和理性型energy:number// 能量值summary:string// 一句话总结date:string// 日期如2026.06.23}1.2 组件声明Componentexportstruct PosterTemplate{ProptemplateId:PosterTemplateIdwarm// 主题选择Propcontent:PosterContent{// 内容数据含默认值name:鹿鹿,personalityType:温和理性型,energy:62,summary:细腻而克制 · 此刻偏向疲惫但温柔,date:}PropposterWidth:number280// 海报宽度PropposterHeight:number420// 海报高度}二、多主题色系统的实现2.1 主题色映射PosterTemplate 的getTheme()方法根据templateId返回对应的主题色对象privategetTheme():ThemeColors{if(this.templateIdquiet){return{bg:AppColors.HM_BLUE_SOFT,// 柔蓝色背景mark:AppColors.QUIET,// 沉静蓝强调色accent:AppColors.DEEP,// 棕色文字tagBg:rgba(91,127,182,0.12)// 蓝底标签}}if(this.templateIdrose){return{bg:#F7E9E5,// 玫瑰粉背景mark:AppColors.ROSE,// 玫瑰粉强调色accent:AppColors.PRIMARY_DEEP,// 深棕文字tagBg:rgba(201,160,160,0.18)// 粉底标签}}// 默认 warm 主题return{bg:AppColors.PAPER,// 米黄纸色背景mark:AppColors.WARM,// 暖橙强调色accent:AppColors.PRIMARY_DEEP,// 深棕文字tagBg:rgba(217,166,137,0.18)// 橙底标签}}2.2 三种主题的视觉效果主题背景色引号色标签背景氛围warm暖米黄纸色 #F5EDE0WARM 暖橙暖橙色 18%温馨、手账感quiet静柔蓝 HM_BLUE_SOFTQUIET 沉静蓝蓝色 12%安静、理性rose玫玫瑰粉 #F7E9E5ROSE 玫瑰粉粉色 18%温柔、浪漫提示主题系统的核心是将变化的部分抽象为ThemeColors接口不变的部分直接硬编码在 build() 方法中。这样新增一个主题只需要在getTheme()中添加一个分支。三、海报 UI 布局详解3.1 四段式布局海报整体分为四个区域从上到下依次排列build(){Column(){// ① 顶部品牌区Row(){Text(鹿)// 品牌首字Text(LULU · 笔迹心理)// 品牌名Blank()Text(this.content.date)// 日期右上角}// ② 中心引号区可弹性拉伸Column(){Text(“)// 上引号 (48fp)Text(this.content.summary)// 引文正文Text(”)// 下引号 (48fp)}.layoutWeight(1)// 占用剩余空间.justifyContent(FlexAlign.Center)// ③ 底部信息区Column(){Text(this.content.name)// 用户名Text(this.content.personalityType)// 人格标签Text(能量${this.content.energy})// 能量值}// ④ 二维码区Row(){Text(▦)// 二维码占位Text(扫码看完整解读)Text(LULU · 鸿蒙生态)}}.width(this.posterWidth).height(this.posterHeight).padding(AppSpacing.L).backgroundColor(this.getTheme().bg).borderRadius(AppRadius.XL).shadow({radius:20,color:rgba(61,53,46,0.10),offsetY:6}).animation({duration:350,curve:Curve.FastOutSlowIn})}3.2 引号区的弹性布局引号区使用.layoutWeight(1)实现弹性拉伸Column(){Text(“).fontSize(48).fontFamily(AppFonts.SERIF).fontColor(this.getTheme().mark).opacity(0.6).margin({bottom:-16})// 负边距紧贴正文Text(this.content.summary).fontSize(AppFonts.SUBTITLE).fontFamily(AppFonts.SERIF).lineHeight(28).textAlign(TextAlign.Center)Text(”).fontSize(48).fontFamily(AppFonts.SERIF).fontColor(this.getTheme().mark).opacity(0.6).margin({top:-16})// 负边距紧贴正文}.layoutWeight(1)// 弹性空间居中于品牌区和底部区之间.justifyContent(FlexAlign.Center)设计细节引号 48fp超大字号与正文重叠负边距 -16vp视觉上引号包裹着正文引号使用衬线字体.fontFamily(AppFonts.SERIF)引号使用主题色 60% 透明度不抢正文layoutWeight(1)让引号区撑满品牌区和底部区之间的垂直空间四、主题色的实际应用4.1 在 UI 元素中的分布主题色系统在海报中分布在以下视觉元素上视觉元素使用主题色的哪个字段代码位置海报背景theme.bg.backgroundColor(this.getTheme().bg)引号颜色theme.markText().fontColor(this.getTheme().mark)标签文字theme.accentText(tag).fontColor(this.getTheme().accent)标签背景theme.tagBg.backgroundColor(this.getTheme().tagBg)品牌首字theme.accentText(鹿).fontColor(this.getTheme().accent)// 标签胶囊 — 使用主题色Row({space:8}){// 人格类型标签Text(this.content.personalityType).fontSize(AppFonts.CAPTION).fontColor(this.getTheme().accent)// 强调色文字.padding({left:10,right:10,top:4,bottom:4}).backgroundColor(this.getTheme().tagBg)// 主题色标签背景.borderRadius(AppRadius.ROUND)// 能量数值标签Text(能量${this.content.energy}).fontSize(AppFonts.CAPTION).fontColor(this.getTheme().accent).padding({left:10,right:10,top:4,bottom:4}).backgroundColor(this.getTheme().tagBg).borderRadius(AppRadius.ROUND)}4.2 二维码区海报底部的二维码区域为后续接入真实二维码做准备Row(){Stack(){Text(▦)// 二维码占位符Unicode 方块.fontSize(36).fontColor(this.getTheme().accent)}.width(54).height(54).borderRadius(AppRadius.S).backgroundColor(AppColors.CARD)Column(){Text(扫码看完整解读)// 引导文字.fontSize(AppFonts.CAPTION).fontColor(AppColors.TEXT)Text(LULU · 鸿蒙生态)// 品牌尾标.fontSize(AppFonts.TINY).fontColor(AppColors.TEXT_3).margin({top:2})}.alignItems(HorizontalAlign.Start).margin({left:10})}.width(100%)五、海报组件的复用5.1 传入内容数据// SharePage 中使用PosterTemplate({templateId:warm,content:{name:鹿鹿,personalityType:温和理性型,energy:78,summary:细腻而克制 · 此刻偏向疲惫但温柔,date:2026.06.23},posterWidth:320,posterHeight:480})5.2 切换主题// 用户选择不同的海报主题StateselectedTheme:PosterTemplateIdwarmRow({space:12}){Button(暖).onClick((){this.selectedThemewarm})Button(静).onClick((){this.selectedThemequiet})Button(玫).onClick((){this.selectedThemerose})}PosterTemplate({templateId:this.selectedTheme,content:this.posterData})六、海报组件设计模式总结6.1 主题系统的设计模式PosterTemplate 展示了一种优雅的主题切换模式定义ThemeColors接口描述所有可主题化的颜色属性声明PosterTemplateId联合类型限定可选主题getTheme()方法根据 ID 返回主题色对象UI 中所有颜色的引用点都使用this.getTheme().xxx这种模式的优势新增主题零风险只需在getTheme()中添加新 case主题不遗漏所有颜色引用同一主题对象不可能出现部分主题化部分未主题化类型安全PosterTemplateId联合类型在编译期就排除了非法主题值6.2 海报组件与其他组件的对比组件可配置程度主题系统数据驱动动画PosterTemplate高内容主题尺寸✅ 3 主题✅ Prop 传入仅入场HmTitleBar中文字操作❌ 固定✅ Prop 传入副标题淡入EmptyState中文字回调❌ 固定✅ Prop 传入✅ 入场脉冲HandwritingRadar低数据尺寸❌ 固定✅ Prop 传入✅ Canvas 动画七、海报的导出与分享7.1 截图导出海报可以通过 ArkUI 的截图功能导出为图片用于分享import{image}fromkit.ImageKit// 将组件内容导出为图片伪代码示意asyncfunctionexportPoster():Promiseimage.PixelMap{// 使用 snapshot 或截图 API 获取海报组件的内容// const pixelMap await this.component.snapshot()// return pixelMap}7.2 分享链路// 海报分享调用链路asyncfunctionsharePoster(){// 1. 导出海报为 PixelMap// 2. 保存到本地相册photoAccessHelper// 3. 调用系统分享或 pasteboard 复制}八、设计规范与扩展8.1 海报设计规范规范项值说明宽高比2:3适合手机竖屏分享内边距16vp保证内容不贴边字号范围10-48fp从品牌名到引号主题色3 套Warm/Quiet/Rose内容行数≤ 3 行引文不超 60 字8.2 扩展方向// 扩展一真实二维码集成Image(this.qrCodeBitmap).width(54).height(54)// 扩展二自定义字体Text(鹿).fontFamily(CustomCalligraphyFont)// 使用手写字体// 扩展三渐变色海报背景.linearGradient({angle:135,colors:[[#F5EDE0,0],[#E8DCDC,1]]})总结本文从 [PosterTemplate.ets](file:///Users/fiona/Downloads/bijixinli/harmony-app/entry/src/main/ets/common/components/PosterTemplate.ets) 出发全面解析了 ArkUI 海报组件的设计方法多主题系统通过ThemeColors接口 getTheme()方法实现 3 套预设主题四段式布局品牌区 → 引号区 → 底部区 → 二维码区弹性设计layoutWeight(1)让引号区自适应填充剩余空间引号排版超大字号 负边距重叠 60% 透明度可配置接口内容、主题、尺寸全部外部传入组件只负责渲染下一篇文章将深入Builder 装饰器与内嵌组件构建函数。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力参考资源Text 组件参考Component 组件化开发linearGradient 渐变属性shadow 阴影属性[PosterTemplate 项目源码](file:///Users/fiona/Downloads/bijixinli/harmony-app/entry/src/main/ets/common/components/PosterTemplate.ets)Prop 父传子参数ArkUI 布局开发指南鸿蒙设计规范HarmonyOS 官方示例