回复
鸿蒙5+文本渲染(Label)样式详解：设置字体、字号、颜色等基础属性
进修的泡芙
发布于 2025-6-7 22:51
浏览
0收藏
引言
在鸿蒙操作系统(HarmonyOS)5.0及以上版本中，文本渲染是构建用户界面的基础功能。ArkUI框架提供了强大的Text组件(相当于其他平台的Label)用于显示文本内容，并支持丰富的样式设置。本文将详细介绍鸿蒙5+中如何设置文本的字体、字号、颜色、对齐方式(左、中、右)、行高、阴影和描边等基础样式属性，适合新手开发者学习。
一、环境准备
在开始编码前，确保已准备好以下开发环境：
已安装鸿蒙开发者工具DevEco Studio(建议使用3.1或更高版本)
已创建一个鸿蒙5.0+的项目
熟悉ArkUI基础语言
二、Text组件基础样式设置
设置字体和字号
在鸿蒙5+中，可以通过.fontFamily()和.fontSize()方法设置文本的字体和字号。
@Entry
@Component
struct FontStyleExample {
build() {
Column() {
// 设置字体和字号示例
Text(‘鸿蒙5+文本渲染示例 - 字体和字号’)
.fontSize(24) // 设置字号，单位为vp(虚拟像素)
.fontFamily(‘HarmonyOS Sans SC’) // 设置字体，使用系统默认中文字体
.margin({ bottom: 20 })
// 对比不同字号的文本
Text('小号文本(14vp)')
.fontSize(14)
.margin({ bottom: 10 })
Text('中号文本(18vp)')
.fontSize(18)
.margin({ bottom: 10 })
Text('大号文本(28vp)')
.fontSize(28)
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#F5F5F5')
}
代码说明：
.fontSize()方法设置字体大小，单位为vp(虚拟像素)，会随系统字体大小设置自动缩放
.fontFamily()方法设置字体，可传入字体名称字符串
设置字体颜色
使用.fontColor()方法可以设置文本颜色，支持十六进制颜色值、RGB值或预定义颜色常量。
@Entry
@Component
struct FontColorExample {
build() {
Column() {
// 设置字体颜色示例
Text(‘红色文本’)
.fontColor(‘#FF0000’) // 十六进制颜色值
.margin({ bottom: 10 })
Text('绿色文本')
.fontColor('green') // 颜色名称
.margin({ bottom: 10 })
Text('蓝色文本')
.fontColor(Color.Blue) // 使用Color常量
.margin({ bottom: 10 })
Text('RGBA颜色文本')
.fontColor('rgba(128, 0, 128, 0.7)') // RGBA颜色值，带透明度
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
代码说明：
支持多种颜色值格式：十六进制、颜色名称、Color常量、RGBA
RGBA格式可以设置透明度，最后一个参数范围0-1
设置文本对齐方式(左、中、右)
使用.textAlign()方法可以设置文本的水平对齐方式。
@Entry
@Component
struct TextAlignExample {
build() {
Column() {
// 文本对齐方式示例
Text(‘文本左对齐(默认)’)
.textAlign(TextAlign.Start) // 左对齐(在从左到右的布局中)
.width(‘80%’)
.border({ width: 1, color: ‘#cccccc’ })
.margin({ bottom: 10 })
Text('文本居中对齐')
.textAlign(TextAlign.Center) // 居中对齐
.width('80%')
.border({ width: 1, color: '#cccccc' })
.margin({ bottom: 10 })
Text('文本右对齐')
.textAlign(TextAlign.End) // 右对齐(在从左到右的布局中)
.width('80%')
.border({ width: 1, color: '#cccccc' })
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
代码说明：
TextAlign.Start: 在从左到右的布局中表现为左对齐，在从右到左的布局中表现为右对齐
TextAlign.Center: 居中对齐
TextAlign.End: 在从左到右的布局中表现为右对齐，在从右到左的布局中表现为左对齐
设置行高
使用.lineHeight()方法可以设置文本的行高，影响多行文本的垂直间距。
@Entry
@Component
struct LineHeightExample {
build() {
Column() {
// 行高设置示例
Text(‘这是一段单行文本，行高设置主要影响多行文本的显示效果。’)
.fontSize(16)
.lineHeight(24) // 设置行高为24vp
.width(‘80%’)
.margin({ bottom: 20 })
// 多行文本行高示例
Text('这是一段多行文本示例，用于展示行高设置的效果。当文本内容超过容器宽度时，会自动换行，而行高决定了行与行之间的垂直间距。适当的行高可以提高文本的可读性，特别是在段落文本中。')
.fontSize(16)
.lineHeight(28) // 设置较大的行高
.width('80%')
.margin({ bottom: 20 })
// 对比不同行高的效果
Column() {
Text('小行高(20vp)')
.fontSize(16)
.lineHeight(20)
.width('40%')
.border({ width: 1, color: '#cccccc' })
Text('默认行高(24vp)')
.fontSize(16)
.lineHeight(24)
.width('40%')
.border({ width: 1, color: '#cccccc' })
Text('大行高(30vp)')
.fontSize(16)
.lineHeight(30)
.width('40%')
.border({ width: 1, color: '#cccccc' })
.width(‘80%’)
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
代码说明：
.lineHeight()方法设置行高，单位为vp
行高值应大于字号大小，以确保文本垂直间距舒适
多行文本的行高效果更为明显
设置文本阴影
鸿蒙5+支持为文本添加阴影效果，使用.textShadow()方法。
@Entry
@Component
struct TextShadowExample {
build() {
Column() {
// 文本阴影示例
Text(‘带阴影的文本’)
.fontSize(20)
.fontColor(‘#333333’)
.textShadow({
radius: 3, // 阴影模糊半径
offset: { x: 2, y: 2 }, // 阴影偏移量
color: ‘#888888’ // 阴影颜色
})
.margin({ bottom: 20 })
// 不同阴影效果的对比
Column() {
Text('轻微阴影')
.fontSize(16)
.textShadow({
radius: 1,
offset: { x: 1, y: 1 },
color: '#AAAAAA'
})
.margin({ bottom: 10 })
Text('明显阴影')
.fontSize(16)
.textShadow({
radius: 3,
offset: { x: 3, y: 3 },
color: '#666666'
})
.margin({ bottom: 10 })
Text('深色阴影')
.fontSize(16)
.textShadow({
radius: 2,
offset: { x: 2, y: 2 },
color: '#333333'
})
.width(‘80%’)
.border({ width: 1, color: '#cccccc' })
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
代码说明：
.textShadow()方法接受一个对象参数，包含:
radius: 阴影模糊半径，值越大阴影越模糊
offset: 阴影偏移量，对象包含x和y属性
color: 阴影颜色
阴影效果可以增强文本的立体感和层次感
设置文本描边(描边效果)
鸿蒙5+支持为文本添加描边效果，使用.fontStroke()方法。
@Entry
@Component
struct FontStrokeExample {
build() {
Column() {
// 文本描边示例
Text(‘带描边的文本’)
.fontSize(24)
.fontColor(‘#FFFFFF’) // 描边文本通常使用浅色或亮色填充
.fontStroke({
width: 1.5, // 描边宽度
color: ‘#000000’ // 描边颜色
})
.margin({ bottom: 20 })
// 不同描边效果的对比
Column() {
Text('细描边')
.fontSize(18)
.fontColor('#FF5722')
.fontStroke({
width: 0.5,
color: '#000000'
})
.margin({ bottom: 10 })
Text('中等描边')
.fontSize(18)
.fontColor('#2196F3')
.fontStroke({
width: 1,
color: '#000000'
})
.margin({ bottom: 10 })
Text('粗描边')
.fontSize(18)
.fontColor('#4CAF50')
.fontStroke({
width: 2,
color: '#000000'
})
.width(‘80%’)
.border({ width: 1, color: '#cccccc' })
.width(‘100%’)
.height('100%')
.padding(16)
.backgroundColor('#333333') // 深色背景使描边效果更明显
}
代码说明：
.fontStroke()方法接受一个对象参数，包含:
width: 描边宽度，值越大描边越粗
color: 描边颜色
描边效果通常与浅色或亮色文本填充结合使用，在深色背景上效果更佳
描边文本适合用于标题或需要突出显示的文本
三、综合样式应用示例
下面是一个综合应用各种文本样式的完整示例，模拟文章标题和段落的样式设置。
@Entry
@Component
struct ArticleStyleExample {
build() {
Column() {
// 文章标题 - 使用较大字号、加粗、居中对齐、阴影效果
Text(‘鸿蒙5+开发指南：文本渲染基础’)
.fontSize(28)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.fontColor(‘#2E5BFF’)
.textShadow({
radius: 2,
offset: { x: 1, y: 1 },
color: ‘#CCCCCC’
})
.margin({ bottom: 30 })
// 文章副标题 - 使用中等字号、正常字重、左对齐、描边效果
Text('基础样式设置：字体、字号、颜色、对齐方式、行高')
.fontSize(20)
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Start)
.fontColor('#FFFFFF')
.fontStroke({
width: 1,
color: '#000000'
})
.margin({ bottom: 20 })
// 文章段落 - 使用标准字号、左对齐、适当行高
Text('鸿蒙5.0及以上版本提供了强大的文本渲染能力，支持丰富的样式设置。开发者可以通过简单的API调用来实现专业的文本显示效果，无需复杂的自定义组件。本文将详细介绍如何设置文本的各种基础样式，包括字体、字号、颜色、对齐方式、行高、阴影和描边等属性。')
.fontSize(16)
.fontColor('#333333')
.textAlign(TextAlign.Start)
.lineHeight(28)
.width('90%')
.margin({ bottom: 20 })
// 段落标题 - 使用较大字号、加粗、左对齐
Text('字体选择与字号设置')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Start)
.margin({ bottom: 10 })
// 段落内容 - 使用标准字号、左对齐
Text('在鸿蒙应用中，可以选择系统默认字体或导入自定义字体。字号设置应考虑可读性和设计需求，通常正文使用14-16vp，标题使用18-24vp或更大。')
.fontSize(16)
.fontColor('#444444')
.textAlign(TextAlign.Start)
.lineHeight(24)
.width('90%')
.margin({ bottom: 20 })
// 段落标题
Text('颜色与对齐方式')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Start)
.margin({ bottom: 10 })
// 段落内容
Text('文本颜色应与背景形成足够对比，确保可读性。对齐方式根据内容类型选择:标题通常居中对齐，正文通常左对齐(从左到右的语言)或右对齐(从右到左的语言)。')
.fontSize(16)
.fontColor('#444444')
.textAlign(TextAlign.Start)
.lineHeight(24)
.width('90%')
.margin({ bottom: 20 })
// 段落标题
Text('行高、阴影与描边')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Start)
.margin({ bottom: 10 })
// 段落内容
Text('适当的行高可以提高文本的可读性，特别是多行文本。阴影和描边效果可以增强文本的视觉层次，适合用于标题或需要突出显示的文本元素。')
.fontSize(16)
.fontColor('#444444')
.textAlign(TextAlign.Start)
.lineHeight(24)
.width('90%')
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
四、最佳实践与注意事项
字号选择：
正文文本推荐使用14-16vp
标题文本根据重要性使用18-28vp或更大
考虑用户系统字体大小设置，使用vp单位而非固定像素
颜色搭配：
确保文本与背景有足够对比度(至少4.5:1)
避免使用纯黑色(#000000)和纯白色(#FFFFFF)，使用接近的颜色减轻眼睛疲劳
遵循应用的整体色彩方案
对齐方式：
标题通常使用居中对齐
正文通常使用左对齐(从左到右的语言)
避免在长段落中使用居中对齐，影响可读性
行高设置：
行高应大于字号大小，通常为字号大小的1.2-1.5倍
多行文本需要更大的行高以提高可读性
标题可以适当减小行高
阴影与描边：
阴影效果适合用于标题或需要突出显示的文本
描边效果适合用于深色背景上的浅色文本或艺术效果
避免过度使用特效，保持UI简洁
五、总结
本文详细介绍了鸿蒙5+中Text组件(标签)的基础样式设置方法，包括字体、字号、颜色、对齐方式、行高、阴影和描边等属性的设置技巧。通过示例代码展示了如何组合这些样式属性，创建美观且易读的文本显示效果。掌握这些基础样式设置是构建专业鸿蒙应用UI的第一步，开发者可以根据实际需求灵活组合这些属性，实现各种文本显示效果。
记住，良好的文本样式设计应该以可读性和用户体验为核心，避免过度装饰而影响内容的清晰呈现。
分类
赞
收藏
回复
相关推荐
