HarmonyOS NEXT - ArkUI: Text组件

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

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

文本样式的属性如下表：

.fontColor(value: ResourceColor) 设置文本颜色。

• Color枚举
• 十六进制值。参考： https://www.runoob.com/cssref/css-colornames.html

.fontSize(value: string | number | Resource) 设置文本尺寸。

.fontStyle(value: FontStyle) 设置文本的字体样式。默认值：FontStyle.Normal。

.fontWeight(value: FontWeight | number | string) 设置文本的字体粗细。

• FontWeight枚举。
• number类型取值[100, 900]，取值间隔为100，默认为400。
• string类型仅支持number类型取值和FontWeight枚举类型取值的字符串形式。 默认值：FontWeight.Normal。

.fontFamily(value: string | Resource) 设置文本的字体主题。使用多个字体，使用“,”进行分割，优先级按顺序生效。例如：“Arial,sans-serif”。

常用属性的使用 设置文本对齐方式：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%')
  }
}