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属性

```typescript

.textAlign(value: TextAlign)

```

TextAlign枚举值：

- TextAlign.Start（默认值）：水平对齐首部。

- TextAlign.Center：水平居中对齐。

- TextAlign.End：水平对齐尾部。

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

```typescript

.textOverflow(value: { overflow: TextOverflow })

.maxLines(value: number)

```

TextOverflow枚举值：

- TextOverflow.None：不显示

- TextOverflow.Clip：裁剪超出的内容

- TextOverflow.Ellipsis：使用省略号代替超出的内容

- TextOverflow.MARQUEE：跑马灯方式滚动显示超出的内容

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

设置文本装饰线：decoration属性

```typescript

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

```

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

TextDecorationType枚举类型：

- TextDecorationType.None：不使用文本装饰线。

-
TextDecorationType.Overline：文字上划线修饰。

-
TextDecorationType.LineThrough：穿过文本的修饰线。

-
TextDecorationType.Underline：文字下划线修饰。

代码实例：TextPage

```typescript

@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%')

}

}

```