HarmonyOS 游戏开发中 UI 交互体验至关重要。Text 组件提供内容、大小、颜色、粗细、对齐、换行、间距、阴影等 8 大核心属性控制，Button 组件支持图文、尺寸、圆角、边框、状态反馈、内边距、布局等 8 大核心属性定制。通过 ArkTS 代码示例展示静态与动态文字控制、按钮样式定制及点击交互实现，结合实战案例演示基础展示、美观样式与交互逻辑，帮助开发者构建像素级精准的界面，提升游戏沉浸感与专业度。
在 HarmonyOS 游戏开发中，用户界面（UI）是玩家与游戏世界交互的第一道桥梁。一个优秀的游戏 UI 不仅要美观、直观，更要具备高度的响应性和一致性。而这一切的基础，正是对 文字（Text） 和 按钮（Button） 的精准控制。
很多初学者在开发小游戏时，往往只关注逻辑实现，忽视了 UI 细节。比如：
这些问题看似微小，却会极大降低游戏的沉浸感和专业度。因此，掌握 Text 与 Button 的精细化配置能力，是迈向高质量 HarmonyOS 游戏开发的关键一步。
本文将从 文字控制、按钮控制、实战案例 三大维度，结合 ArkTS 代码，手把手教你如何实现像素级精准的 UI 控制，为后续开发复杂游戏界面打下坚实基础。
HarmonyOS 中的 Text 组件提供了丰富的样式控制能力。以下从 8 个方面详解其精准用法。
@State 响应式变量实现。@Entry
@Component
struct TextDemo {
@State message: string = '欢迎来到 HarmonyOS 游戏！'
build() {
Column() {
Text(this.message).fontSize(20)
Button('切换文字').onClick(() => {
this.message = this.message === '欢迎来到 HarmonyOS 游戏！' ? '你已进入战斗模式！' : '欢迎来到 HarmonyOS 游戏！'
})
}.padding(20)
}
}
✅ 动态文字是游戏状态提示（如'生命值：100'、'得分：500'）的核心实现方式。
fontSize 与 vp 单位HarmonyOS 推荐使用 vp（Viewport-independent Pixels） 作为单位，自动适配不同屏幕密度。
Text('精准字号').fontSize(16) // 默认单位为 vp
Text('精准字号').fontSize(24.0.vp) // 显式指定单位（推荐）
⚠️ 避免使用
px，否则在高分辨率设备上会显得过小。
Color.Black'#FF5722'ResourceColor.$r('app.color.primary')Text('多种颜色示例').fontColor(Color.Red) // 系统色
Text('多种颜色示例').fontColor('#3F51B5') // 16 进制
Text('多种颜色示例').fontColor($r('app.color.accent')) // 资源引用（需在 resources/base/element/color.json 定义）
💡 游戏中常用颜色区分状态：红色=危险，绿色=安全，黄色=警告。
fontWeight支持关键词或数值（100~900）：
Text('正常').fontWeight(FontWeight.Normal) // 或 '400'
Text('粗体').fontWeight(FontWeight.Bold) // 或 '700'
Text('超粗').fontWeight(900)
🎮 游戏标题建议使用
Bold或900，提升视觉冲击力。
textAlign适用于单行或多行文本：
Column() {
Text('左对齐').textAlign(TextAlign.Start).width('100%')
Text('居中').textAlign(TextAlign.Center).width('100%')
Text('右对齐').textAlign(TextAlign.End).width('100%')
}
🔍 多行文本默认按段落对齐，确保容器有明确宽度。
maxLines + textOverflow防止文字溢出破坏布局：
Text('这是一段非常非常长的文字，可能会超出容器宽度，需要处理溢出情况')
.width(200)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示 ...
⚠️ 若不设
maxLines，默认不限制行数，可能导致布局塌陷。
lineHeight 与 letterSpacing提升可读性，尤其在密集信息展示时：
Text('行高与字间距调整\n第二行')
.fontSize(16)
.lineHeight(24) // 行高 24vp
.letterSpacing(2) // 字符间距 2vp
.width('100%')
📏 行高建议为字号的 1.2~1.5 倍；字间距用于标题装饰效果。
textShadow增强立体感，常用于游戏 HUD（抬头显示）：
Text('带阴影文字')
.fontSize(28)
.fontColor(Color.White)
.textShadow({
color: '#CC000000', // 半透明黑
offsetX: 2,
offsetY: 2,
radius: 10 // 模糊半径
})
🌟 阴影可模拟'发光'效果，配合深色背景更佳。
按钮是游戏交互的核心控件。HarmonyOS 的 Button 支持高度自定义。
Button('开始游戏')Row 组合Button() {
Row() {
Image($r('app.media.icon_play')).width(20).height(20).margin({ right: 8 })
Text('开始游戏')
}
}
🖼 图标建议使用
resources/base/media/下的资源。
width / height / minWidthButton('标准按钮').width(200).height(50).minWidth(100) // 最小宽度防挤压
📏 游戏按钮建议高度 ≥ 48vp（符合触摸热区规范）。
borderRadius08Button('胶囊按钮').width(160).height(40).borderRadius(20) // 40/2 = 20
🎯 胶囊按钮（Capsule）是 HarmonyOS 设计语言推荐样式。
borderWidth / borderColor / borderStyleButton('虚线边框').borderWidth(2).borderColor('#9C27B0').borderStyle(BorderStyle.Dashed)
🖌
BorderStyle支持：Solid（实线）、Dashed（虚线）、Dotted（点线）。
通过 @State 控制不同状态：
@State isPressed: boolean = false
@State isDisabled: boolean = false
Button(this.isPressed ? '松开' : '按下我')
.backgroundColor(this.isPressed ? '#E91E63' : '#9C27B0')
.scale({ x: this.isPressed ? 0.95 : 1.0 }) // 点击缩放
.enabled(!this.isDisabled)
.onClick(() => {
this.isPressed = true
setTimeout(() => {
this.isPressed = false
}, 150)
})
✅ 缩放 + 变色 是最自然的点击反馈。
padding避免文字紧贴边缘：
Button('舒适内边距').padding({ left: 24, right: 24, top: 12, bottom: 12 }) // 或简写：.padding(16)
📐 内边距建议 ≥ 12vp，确保触控舒适。
使用 Column / Row / Stack + alignItems / justifyContent：
// 底部固定按钮
Column() {
// 游戏主内容
Spacer() // 占满剩余空间
Button('返回主菜单').width('100%').height(56)
}
🧱
Spacer()是实现底部固定布局的关键。
Column() {
Text('HarmonyOS 游戏启动器')
.fontSize(24)
.fontColor('#212121')
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.width('100%')
.margin({ bottom: 40 })
Button('开始冒险')
.width(240)
.height(56)
.backgroundColor('#4CAF50')
.fontColor(Color.White)
.borderRadius(12)
}.padding(30)
✅ 展示基础样式组合，适合新手入门。
Column() {
Text('史诗级 RPG')
.fontSize(32)
.fontColor(Color.White)
.fontWeight(700)
.textShadow({
color: '#00000080',
offset: { x: 2, y: 2 },
radius: 6
})
.margin({ bottom: 60 })
Button() {
Text('进入世界').fontColor(Color.White).fontSize(20)
}
.width(280)
.height(64)
.linearGradient(new LinearGradient({
startPoint: [0, 0],
endPoint: [0, 100],
colors: ['#FF5722', '#E91E63']
}))
.borderRadius(32)
.shadow({ radius: 10, color: '#00000040', offsetX: 0, offsetY: 4 })
.width('100%')
.height('100%')
.backgroundColor('#121212')
.justifyContent(FlexAlign.Center)
}
🌈 使用深色背景 + 渐变按钮 + 阴影，营造游戏氛围。
@State score: number = 0
@State isAttacking: boolean = false
Column() {
Text(`当前得分：${this.score}`)
.fontSize(28)
.fontColor(this.score > 10 ? '#4CAF50' : '#F44336')
.margin({ bottom: 40 })
Button(this.isAttacking ? '攻击中...' : '发动攻击！')
.width(220)
.height(56)
.backgroundColor(this.isAttacking ? '#9E9E9E' : '#2196F3')
.enabled(!this.isAttacking)
.borderRadius(28)
.onClick(() => {
this.isAttacking = true
this.score += Math.floor(Math.random() * 10) + 1
setTimeout(() => {
this.isAttacking = false
}, 800)
})
}.padding(30).alignItems(HorizontalAlign.Center)
🎮 模拟游戏战斗逻辑：点击攻击 → 得分增加 → 短暂冷却。
在 HarmonyOS 游戏开发中，UI 的精细度直接决定用户体验的上限。本文系统讲解了 Text 与 Button 的 16 项核心控制属性，并通过三个由浅入深的实战案例，展示了如何将这些知识应用于真实场景。
掌握这些基础后，你将能轻松应对：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online