前言在 HarmonyOS 应用开发中主菜单是用户接触应用的第一界面。一个清晰的主菜单需要把游戏标题、图标、按钮和规则说明有序组织起来。本系列以开源项目「猫猫大作战」一款猫咪合并消除游戏为锚点带你从零到一拆解每一个 ArkUI 组件、每一段 ArkTS 逻辑是如何落地的。本篇是系列第 1 篇聚焦最基础的视觉单元——标题文本与Emoji 图标的渲染。我们会把Text组件的字号、字重、颜色、间距属性一次性讲透并补上 Emoji 在 HarmonyOS 下的渲染技巧与坑点。读完本篇你将能独立搭出「游戏主菜单顶部标题区」。提示本系列假设你已经装好 DevEco Studio 6.1.1 ReleaseAPI 24并新建了 Empty Ability 工程。我们不讲环境搭建与 ArkTS 基础语法直接进入实战。一、场景拆解主菜单顶部到底要画什么打开「猫猫大作战」源码entry/src/main/ets/pages/Index.ets找到MainMenuView这个Builder主菜单顶部三行内容如下// 来源entry/src/main/ets/pages/Index.ets MainMenuView() Text() .fontSize(72) .margin({ bottom: 8 }) Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 })三段文本自上而下依次是Emoji 图标、主标题、副标题。视觉层级靠字号递减72 → 36 → 16和颜色对比深色#2C3E50→ 灰色#95A5A6拉开。整体被一个Column容器包裹并通过.linearGradient给整个菜单铺一层浅蓝渐变背景。本篇只啃顶部三行文本按钮和规则面板留给后续篇章。二、Text 组件核心属性速览Text是 ArkUI 里最基础的文本显示组件用于展示静态文本。官方把它和Span行内文本归在同一组参考 文本显示 (Text/Span) 官方指南。2.1 创建 Text 的两种方式// 方式 1直接传字符串 Text(我是一段文本) // 方式 2引用 resources/base/element/string.json 里的资源 Text($r(app.string.app_name))推荐用方式 2 的$r(app.string.xxx)引用资源这样多语言和暗色模式切换时不用改代码。本系列后续第 28、29 篇会专门讲暗色模式与 i18n这里先用字符串字面量快速起步。2.2 本篇用到的属性清单属性类型作用本篇取值fontSizenumber | string字体大小vp72 / 36 / 16fontWeightFontWeight 枚举字重FontWeight.BoldfontColorstring | Color字体颜色#2C3E50、#95A5A6marginPadding | number外边距{ bottom: 8 }提示fontSize默认单位是vpvirtual pixel不是 px。vp 会随屏幕密度自适应是 HarmonyOS 推荐的尺寸单位。2.3 字重枚举 FontWeight 常见值Text(Lighter).fontWeight(FontWeight.Lighter) // 最细 Text(Normal).fontWeight(FontWeight.Normal) // 默认 Text(Medium).fontWeight(FontWeight.Medium) // 中等 Text(Bold).fontWeight(FontWeight.Bold) // 加粗 Text(Bolder).fontWeight(FontWeight.Bolder) // 更粗主标题用Bold加粗副标题不设字重走默认Normal层级感就出来了。三、Emoji 图标渲染与踩坑主菜单最顶部那只是个 Emoji 字符。HarmonyOS 的Text组件原生支持 Emoji 渲染直接写字符串即可Text() .fontSize(72) .margin({ bottom: 8 })看起来没什么技术含量但实战中常踩三个坑Emoji 字体颜色不生效fontColor对彩色 Emoji 无效Emoji 本身自带颜色表。别尝试.fontColor(Color.Red)把染红只会让单色 Emoji如✨变色彩色 Emoji 我行我素。Emoji 字号撑不开某些 Emoji 字形比同字号汉字小一圈需要把fontSize调大 10–20% 才视觉对齐。本项目把 Emoji 字号设到72比主标题36大一倍视觉才压得住。Emoji 在真机与预览器表现不一致DevEco Studio 预览器可能缺字形真机上的 HarmonyOS Symbol 字体才是最终效果。一切以真机为准。3.1 何时改用 SymbolGlyph 替代 EmojiEmoji 的短板是无法多色分层、无法动效。HarmonyOS 提供了SymbolGlyph组件它基于 1500 矢量图标字体sys.symbol支持多层着色与 7 种动效SymbolGlyph($r(sys.symbol.cat_fill)) .fontSize(72) .fontColor([Color.Orange, Color.White]) .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE), true)提示本系列第 20 篇会专门讲SymbolGlyph替代 Emoji 的场景。确认存在的图标名有cat_fill、star、bell等不存在的常见错误名有photo、image可在 HarmonyOS Symbol 官方索引 查询。本项目为了降低入门门槛主菜单先用 Emoji后续篇章会演示把它升级为SymbolGlyph并加弹跳动效。四、主标题字号与字重的视觉层级主标题「猫猫大作战」是主菜单的视觉焦点Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 })三个属性协同发力fontSize(36)—— 36vp 在主流手机上约等于 18pt是主标题常用规格。fontWeight(FontWeight.Bold)—— 加粗让它从副标题里跳出来。fontColor(#2C3E50)—— 深蓝灰是经典的「理性」配色和浅蓝渐变背景对比足够但不刺眼。提示颜色字符串支持#RRGGBB、#AARRGGBB带透明度和rgb()/rgba()。本项目全程用#RRGGBBB简单直观。五、副标题配色与留白副标题「合并进化 · 策略消除」是主菜单的说明性文本Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 })关键在两个对比字号对比16 比 36副标题明显次于主标题。颜色对比#95A5A6灰色 vs#2C3E50深色副标题退到背景里主标题更突出。留白是新手最容易忽略的细节。注意三行文本的margin.bottom行margin.bottom作用 Emoji8与主标题贴近些猫猫大作战8与副标题贴近些合并进化 · 策略消除48给下方按钮区让出大空隙近距分组、远距分区是排版常识标题三行内部紧贴8标题区与按钮区之间留大空48。六、完整代码与效果把三段文本放回Column容器完整的主菜单顶部片段Builder MainMenuView() { Column() { Spacer().height(15%) // 顶部留白后续篇章会替换为 Blank() // 游戏标题 Text() .fontSize(72) .margin({ bottom: 8 }) Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 }) // ... 后续是开始按钮、规则面板本篇不展开 } .width(100%) .height(100%) .linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]] }) .alignItems(HorizontalAlign.Center) }整体效果是浅蓝渐变背景上居中的 Emoji 主标题 副标题三行下方留 48vp 空隙给按钮区。提示Spacer其实不是 ArkUI 组件本项目早期误用会报Cannot find name Spacer。正确写法是Blank()。本系列第 22 篇会专门讲Blank替代Spacer。七、调试技巧在真机上看文本渲染DevEco Studio 预览器改完代码点 Preview 面板即时看但 Emoji 可能不显示。模拟器HarmonyOS 模拟器字形接近真机建议中等复杂度界面用它。真机用hdc连真机跑hdc shell进入设备hdc hilog看日志。本系列第 195 篇会专讲 HiLog。调试文本布局时临时给Text加个.border({ width: 1, color: Color.Red })能看清它的实际占框调好再去掉。八、属性进阶textAlign 与 maxLines本篇主菜单没用到但实战中很快会碰到的两个属性Text(一段很长的说明文字可能会换行需要控制对齐方式。) .fontSize(14) .textAlign(TextAlign.Center) // Center | Start | End .maxLines(2) // 最多 2 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 溢出显示省略号 .width(80%)textAlign多行文本的水平对齐单行文本无效。maxLinestextOverflow控制溢出规则面板里长说明会用得到。九、性能与最佳实践build()里别做字符串拼接Text的内容如果是动态的在aboutToAppear里拼好存到Statebuild里只读。本系列第 64 篇会讲。避免频繁修改fontSize字号变化会触发 re-layout比改颜色贵。能用颜色对比拉层级就别改字号。fontColor优先用资源$r(app.color.title_color)比硬编码#2C3E50更易维护暗色模式切换也靠它。本系列第 28 篇专讲。总结本篇我们从「猫猫大作战」主菜单顶部三行文本切入掌握了Text组件的fontSize、fontWeight、fontColor、margin四大基础属性并通过 Emoji 渲染踩坑学了SymbolGlyph的替代时机。核心要点字号递减 颜色对比 留白分组是主菜单排版的三大杠杆。下一篇我们将继续主菜单拆解副标题的多行 Text 排版技巧包括textAlign、maxLines、textOverflow的组合使用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets文本显示 (Text/Span) 官方指南文本概述 — HarmonyOS 官方文档HarmonyOS Symbol 图标官方索引开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页ArkUI 组件参考系列索引本仓库articles/INDEX.md
HarmonyOS应用开发实战：猫猫大作战-最基础的视觉单元——标题文本与Emoji 图标的渲染
前言在 HarmonyOS 应用开发中主菜单是用户接触应用的第一界面。一个清晰的主菜单需要把游戏标题、图标、按钮和规则说明有序组织起来。本系列以开源项目「猫猫大作战」一款猫咪合并消除游戏为锚点带你从零到一拆解每一个 ArkUI 组件、每一段 ArkTS 逻辑是如何落地的。本篇是系列第 1 篇聚焦最基础的视觉单元——标题文本与Emoji 图标的渲染。我们会把Text组件的字号、字重、颜色、间距属性一次性讲透并补上 Emoji 在 HarmonyOS 下的渲染技巧与坑点。读完本篇你将能独立搭出「游戏主菜单顶部标题区」。提示本系列假设你已经装好 DevEco Studio 6.1.1 ReleaseAPI 24并新建了 Empty Ability 工程。我们不讲环境搭建与 ArkTS 基础语法直接进入实战。一、场景拆解主菜单顶部到底要画什么打开「猫猫大作战」源码entry/src/main/ets/pages/Index.ets找到MainMenuView这个Builder主菜单顶部三行内容如下// 来源entry/src/main/ets/pages/Index.ets MainMenuView() Text() .fontSize(72) .margin({ bottom: 8 }) Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 })三段文本自上而下依次是Emoji 图标、主标题、副标题。视觉层级靠字号递减72 → 36 → 16和颜色对比深色#2C3E50→ 灰色#95A5A6拉开。整体被一个Column容器包裹并通过.linearGradient给整个菜单铺一层浅蓝渐变背景。本篇只啃顶部三行文本按钮和规则面板留给后续篇章。二、Text 组件核心属性速览Text是 ArkUI 里最基础的文本显示组件用于展示静态文本。官方把它和Span行内文本归在同一组参考 文本显示 (Text/Span) 官方指南。2.1 创建 Text 的两种方式// 方式 1直接传字符串 Text(我是一段文本) // 方式 2引用 resources/base/element/string.json 里的资源 Text($r(app.string.app_name))推荐用方式 2 的$r(app.string.xxx)引用资源这样多语言和暗色模式切换时不用改代码。本系列后续第 28、29 篇会专门讲暗色模式与 i18n这里先用字符串字面量快速起步。2.2 本篇用到的属性清单属性类型作用本篇取值fontSizenumber | string字体大小vp72 / 36 / 16fontWeightFontWeight 枚举字重FontWeight.BoldfontColorstring | Color字体颜色#2C3E50、#95A5A6marginPadding | number外边距{ bottom: 8 }提示fontSize默认单位是vpvirtual pixel不是 px。vp 会随屏幕密度自适应是 HarmonyOS 推荐的尺寸单位。2.3 字重枚举 FontWeight 常见值Text(Lighter).fontWeight(FontWeight.Lighter) // 最细 Text(Normal).fontWeight(FontWeight.Normal) // 默认 Text(Medium).fontWeight(FontWeight.Medium) // 中等 Text(Bold).fontWeight(FontWeight.Bold) // 加粗 Text(Bolder).fontWeight(FontWeight.Bolder) // 更粗主标题用Bold加粗副标题不设字重走默认Normal层级感就出来了。三、Emoji 图标渲染与踩坑主菜单最顶部那只是个 Emoji 字符。HarmonyOS 的Text组件原生支持 Emoji 渲染直接写字符串即可Text() .fontSize(72) .margin({ bottom: 8 })看起来没什么技术含量但实战中常踩三个坑Emoji 字体颜色不生效fontColor对彩色 Emoji 无效Emoji 本身自带颜色表。别尝试.fontColor(Color.Red)把染红只会让单色 Emoji如✨变色彩色 Emoji 我行我素。Emoji 字号撑不开某些 Emoji 字形比同字号汉字小一圈需要把fontSize调大 10–20% 才视觉对齐。本项目把 Emoji 字号设到72比主标题36大一倍视觉才压得住。Emoji 在真机与预览器表现不一致DevEco Studio 预览器可能缺字形真机上的 HarmonyOS Symbol 字体才是最终效果。一切以真机为准。3.1 何时改用 SymbolGlyph 替代 EmojiEmoji 的短板是无法多色分层、无法动效。HarmonyOS 提供了SymbolGlyph组件它基于 1500 矢量图标字体sys.symbol支持多层着色与 7 种动效SymbolGlyph($r(sys.symbol.cat_fill)) .fontSize(72) .fontColor([Color.Orange, Color.White]) .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE), true)提示本系列第 20 篇会专门讲SymbolGlyph替代 Emoji 的场景。确认存在的图标名有cat_fill、star、bell等不存在的常见错误名有photo、image可在 HarmonyOS Symbol 官方索引 查询。本项目为了降低入门门槛主菜单先用 Emoji后续篇章会演示把它升级为SymbolGlyph并加弹跳动效。四、主标题字号与字重的视觉层级主标题「猫猫大作战」是主菜单的视觉焦点Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 })三个属性协同发力fontSize(36)—— 36vp 在主流手机上约等于 18pt是主标题常用规格。fontWeight(FontWeight.Bold)—— 加粗让它从副标题里跳出来。fontColor(#2C3E50)—— 深蓝灰是经典的「理性」配色和浅蓝渐变背景对比足够但不刺眼。提示颜色字符串支持#RRGGBB、#AARRGGBB带透明度和rgb()/rgba()。本项目全程用#RRGGBBB简单直观。五、副标题配色与留白副标题「合并进化 · 策略消除」是主菜单的说明性文本Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 })关键在两个对比字号对比16 比 36副标题明显次于主标题。颜色对比#95A5A6灰色 vs#2C3E50深色副标题退到背景里主标题更突出。留白是新手最容易忽略的细节。注意三行文本的margin.bottom行margin.bottom作用 Emoji8与主标题贴近些猫猫大作战8与副标题贴近些合并进化 · 策略消除48给下方按钮区让出大空隙近距分组、远距分区是排版常识标题三行内部紧贴8标题区与按钮区之间留大空48。六、完整代码与效果把三段文本放回Column容器完整的主菜单顶部片段Builder MainMenuView() { Column() { Spacer().height(15%) // 顶部留白后续篇章会替换为 Blank() // 游戏标题 Text() .fontSize(72) .margin({ bottom: 8 }) Text(猫猫大作战) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) .margin({ bottom: 8 }) Text(合并进化 · 策略消除) .fontSize(16) .fontColor(#95A5A6) .margin({ bottom: 48 }) // ... 后续是开始按钮、规则面板本篇不展开 } .width(100%) .height(100%) .linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]] }) .alignItems(HorizontalAlign.Center) }整体效果是浅蓝渐变背景上居中的 Emoji 主标题 副标题三行下方留 48vp 空隙给按钮区。提示Spacer其实不是 ArkUI 组件本项目早期误用会报Cannot find name Spacer。正确写法是Blank()。本系列第 22 篇会专门讲Blank替代Spacer。七、调试技巧在真机上看文本渲染DevEco Studio 预览器改完代码点 Preview 面板即时看但 Emoji 可能不显示。模拟器HarmonyOS 模拟器字形接近真机建议中等复杂度界面用它。真机用hdc连真机跑hdc shell进入设备hdc hilog看日志。本系列第 195 篇会专讲 HiLog。调试文本布局时临时给Text加个.border({ width: 1, color: Color.Red })能看清它的实际占框调好再去掉。八、属性进阶textAlign 与 maxLines本篇主菜单没用到但实战中很快会碰到的两个属性Text(一段很长的说明文字可能会换行需要控制对齐方式。) .fontSize(14) .textAlign(TextAlign.Center) // Center | Start | End .maxLines(2) // 最多 2 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 溢出显示省略号 .width(80%)textAlign多行文本的水平对齐单行文本无效。maxLinestextOverflow控制溢出规则面板里长说明会用得到。九、性能与最佳实践build()里别做字符串拼接Text的内容如果是动态的在aboutToAppear里拼好存到Statebuild里只读。本系列第 64 篇会讲。避免频繁修改fontSize字号变化会触发 re-layout比改颜色贵。能用颜色对比拉层级就别改字号。fontColor优先用资源$r(app.color.title_color)比硬编码#2C3E50更易维护暗色模式切换也靠它。本系列第 28 篇专讲。总结本篇我们从「猫猫大作战」主菜单顶部三行文本切入掌握了Text组件的fontSize、fontWeight、fontColor、margin四大基础属性并通过 Emoji 渲染踩坑学了SymbolGlyph的替代时机。核心要点字号递减 颜色对比 留白分组是主菜单排版的三大杠杆。下一篇我们将继续主菜单拆解副标题的多行 Text 排版技巧包括textAlign、maxLines、textOverflow的组合使用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets文本显示 (Text/Span) 官方指南文本概述 — HarmonyOS 官方文档HarmonyOS Symbol 图标官方索引开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页ArkUI 组件参考系列索引本仓库articles/INDEX.md
