HarmonyOS 游戏开发实践:按钮与文字精准控制详解
HarmonyOS 游戏开发中 UI 交互体验至关重要。Text 组件提供内容、大小、颜色、粗细、对齐、换行、间距、阴影等 8 大核心属性控制,Button 组件支持图文、尺寸、圆角、边框、状态反馈、内边距、布局等 8 大核心属性定制。通过 ArkTS 代码示例展示静态与动态文字控制、按钮样式定制及点击交互实现,结合实战案例演示基础展示、美观样式与交互逻辑,帮助开发者构建像素级精准的界面,提升游戏沉浸感与专业度。

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