前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

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

}

}

```

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言