空间网站网站搭建服务器

ArkUI Text 组件详解与使用指南

Text 是 ArkUI 中最基础的文本显示组件，用于在界面上展示各种格式的文本内容。以下是 Text 组件的详细介绍和使用方法。

基本介绍

Text 组件特点：

• 支持普通文本、富文本和国际化文本
• 提供丰富的文本样式控制
• 支持文本溢出处理
• 可以实现文本点击事件

基本使用

1. 简单文本显示

@Entry
@Component
struct BasicTextExample {build() {Column() {Text('Hello, HarmonyOS!').fontSize(30).fontColor(Color.Blue)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

2. 多行文本

Text('这是一段较长的文本内容，当文本超过一行时会自动换行显示。ArkUI的Text组件支持多行文本显示，并可以控制最大行数。').fontSize(16).maxLines(3) // 限制最大行数.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出部分显示省略号.margin(10)

文本样式控制

1. 字体样式

Text('多样式文本').fontSize(20) // 字体大小.fontColor('#FF0000') // 字体颜色.fontWeight(FontWeight.Bold) // 字体粗细.fontStyle(FontStyle.Italic) // 字体样式.fontFamily('Arial') // 字体家族

2. 文本装饰

Text('装饰文本').decoration({ // 文本装饰线type: TextDecorationType.Underline, // 下划线color: Color.Black // 装饰线颜色})

3. 文本对齐

Column() {Text('左对齐文本').width('90%').textAlign(TextAlign.Start) // 左对齐Text('居中文本').width('90%').textAlign(TextAlign.Center) // 居中对齐Text('右对齐文本').width('90%').textAlign(TextAlign.End) // 右对齐
}

4. 行高与字间距

Text('控制行高和字间距的文本').fontSize(16).lineHeight(30) // 行高.letterSpacing(2) // 字间距

高级功能

1. 富文本显示

Text() {Span('红色文本').fontColor(Color.Red).fontSize(20)Span(' + ')Span('蓝色文本').fontColor(Color.Blue).fontWeight(FontWeight.Bold)Span(' = ')Span('多彩效果').fontColor('#FF00FF').decoration({ type: TextDecorationType.Underline })
}

2. 文本点击事件

@State clickCount: number = 0build() {Text(`点击次数: ${this.clickCount}`).fontSize(20).onClick(() => {this.clickCount++}).backgroundColor('#f0f0f0').padding(10)
}

3. 文本选择与复制

Text('长按可以选择并复制这段文本').fontSize(18).textSelection({ // 启用文本选择enabled: true}).copyOption(CopyOptions.LocalDevice) // 设置复制选项

4. 国际化文本

// 在resources目录下的string.json中定义
// {
//   "string": [
//     {
//       "name": "welcome_message",
//       "value": "Welcome to HarmonyOS!"
//     }
//   ]
// }Text($r('app.string.welcome_message')).fontSize(20)

性能优化

1. 静态文本优化

// 对于不会改变的静态文本，使用const声明
private const staticText: string = '静态文本内容'build() {Text(this.staticText).fontSize(16)
}

2. 复杂文本优化

// 对于复杂的富文本，使用@Builder分离构建逻辑
@Builder
complexTextBuilder() {Span('第一部分').fontColor(Color.Red)Span('第二部分').fontColor(Color.Blue)
}build() {Text(this.complexTextBuilder).fontSize(18)
}

最佳实践

1. 避免过度嵌套：减少Text组件的嵌套层级
2. 合理使用Span：对于简单样式差异使用Span而非多个Text组件
3. 控制文本长度：特别长的文本考虑使用折叠/展开功能
4. 注意性能：频繁更新的文本内容考虑性能影响
5. 适配不同设备：使用相对单位或资源文件适配不同屏幕尺寸

实际应用示例

1. 新闻列表项

ListItem() {Column() {Text(newsItem.title).fontSize(18).fontWeight(FontWeight.Bold).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis })Text(newsItem.summary).fontSize(14).fontColor('#666666').maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis }).margin({ top: 5 })Row() {Text(newsItem.author).fontSize(12).fontColor('#999999')Text(newsItem.time).fontSize(12).fontColor('#999999').margin({ left: 10 })}.margin({ top: 8 }).width('100%').justifyContent(FlexAlign.SpaceBetween)}.padding(10)
}

2. 价格显示

Row() {Text('¥').fontSize(16).fontColor('#FF0000')Text(price.current.toString()).fontSize(24).fontColor('#FF0000').fontWeight(FontWeight.Bold)Text(price.original.toString()).fontSize(16).fontColor('#999999').decoration({ type: TextDecorationType.LineThrough }).margin({ left: 8 })
}

通过合理使用 Text 组件及其丰富的样式控制选项，可以创建出美观且功能丰富的文本显示效果。