##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##

点击跳转《HarmonyOS Next快速入门》视频教程

Text组件用于在界面上展示一段文本信息，可以包含子组件Span。

文本样式

包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。
文本样式的属性如下表：

常用属性的使用

设置文本对齐方式：textAlign属性

.textAlign(value: TextAlign)

TextAlign枚举值：

• TextAlign.Start（默认值）：水平对齐首部。
• TextAlign.Center：水平居中对齐。
• TextAlign.End：水平对齐尾部。

设置文本超长显示：textOverflow属性和maxLines属性

.textOverflow(value: { overflow: TextOverflow })
.maxLines(value: number)

TextOverflow枚举值：

• TextOverflow.None：不显示
• TextOverflow.Clip：裁剪超出的内容
• TextOverflow.Ellipsis：使用省略号代替超出的内容
• TextOverflow.MARQUEE：跑马灯方式滚动显示超出的内容

注意：textOverflow属性必须配合maxLines属性使用，单独设置部分不生效

设置文本装饰线：decoration属性

.decoration(value: { type: TextDecorationType, color?: ResourceColor, style?: TextDecorationStyle })

DecorationStyleInterface包含type、color和style参数，color和style为可选参数。

TextDecorationType枚举类型：

• TextDecorationType.None：不使用文本装饰线。
• TextDecorationType.Overline：文字上划线修饰。
• TextDecorationType.LineThrough：穿过文本的修饰线。
• TextDecorationType.Underline：文字下划线修饰。

代码实例：TextPage

@Entry
@Component
struct TextPage {
  @State message: string = '第1节 Text组件';

  build() {
    Column({space:6}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Text('设置成红色').fontColor(Color.Red)
      Text('设置成蓝色').fontColor('#0000FF')
      Text('设置字体尺寸').fontSize(20)
      Text('设置字体样式').fontStyle(FontStyle.Italic)
      Text('设置字体粗细').fontWeight(FontWeight.Bold)
      Text('设置字体主题').fontFamily('Arial')
      Text('设置左对齐').textAlign(TextAlign.Start).width("100%")
      Text('设置右对齐').textAlign(TextAlign.End).width("100%")
      Text('设置中间对齐').textAlign(TextAlign.Center).width("100%")
      Text('设置文本过长时，自动隐藏超出部分的文字，并在最后结束位置使用省略号')
        .maxLines(1)
        .textOverflow({overflow:TextOverflow.MARQUEE})
      Text('设置文本过长时，自动隐藏超出部分的文字，并在最后结束位置使用省略号')
        .textOverflow({overflow:TextOverflow.Ellipsis})

      Text('文本装饰线设置：删除线').decoration({type:TextDecorationType.LineThrough})
      Text('文本装饰线设置：下划线')
        .decoration({type:TextDecorationType.Underline,color:Color.Red,style:TextDecorationStyle.DASHED})
    }
    .height('100%')
    .width('100%')
  }
}