Harmany-UIAbility-Text组件——【坚果派-红目香薰】

​

 摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

Text组件

文本样式

设置文本超长显示

设置文本装饰线

Text组件

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

文本样式

针对包含文本元素的组件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式，分别设置文本的颜色、大小、样式、粗细以及字体，文本样式的属性如下表：

下面示例代码中包含两个Text组件，第一个使用的是默认样式，第二个给文本设置了一些文本样式。

@Entry@Component

struct Index {

@State message: string = 'HarmonyOS'

build() {

Row() {

Column() {

Text('HarmonyOS') //基础文字

Text(this.message) //引用变量文字·添加样式

.fontColor(Color.Blue) //文字颜色

.fontSize(50) //文字大小

.fontStyle(FontStyle.Italic) //斜体

.fontWeight(FontWeight.Bold) //加粗

.fontFamily('华文行楷') //字体

.textAlign(TextAlign.Start)//文本位置,Start Center End

.padding(10)//内边距

.margin(10)//外边距

.backgroundColor('#C75450')

.width('100%')

}

.width('100%')

}

.width('100%')

.height('100%')

}

}

实际效果：

​编辑

所有的效果都对应的上，没有问题。

注：

textAlign参数类型为TextAlign，定义了以下几种类型：

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

​编辑

效果还是很明显的。

设置文本超长显示

当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ，它将显示不下的文本用 "..." 表示：

​编辑

示例代码：

@Entry@Component

struct Index {

@State message: string = 'HarmonyOS'

@State music_yanyuan: string = "说话的方式简单点,递进的情绪请省略,你又不是个演员,别设计那些情节,没意见," +

"我只想看看你怎么圆,你难过的太表面,像没天赋的演员,观众一眼能看见。"

build() {

Row() {

Column() {

Text(this.music_yanyuan) //文本超长显示

.fontSize(22)

.maxLines(3)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.backgroundColor('#9E2927')

.width('100%')

}

.width('100%')

}

.width('100%')

.height('100%')

}

}

设置文本装饰线

使用decoration设置文本装饰线样式及其颜色，大家在浏览网页的时候经常可以看到装饰线，例如带有下划线超链接文本。decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationTyp，color为可选参数。

​编辑

示例代码：

@Entry@Component

struct Index {

@State message: string = 'HarmonyOS'

@State music_yanyuan: string = "说话的方式简单点,递进的情绪请省略,你又不是个演员,别设计那些情节,没意见," +

"我只想看看你怎么圆,你难过的太表面,像没天赋的演员,观众一眼能看见。"

build() {

Row() {

Column() {

Text(this.music_yanyuan) //文本超长显示

.fontSize(50)

.maxLines(5)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.decoration({ type: TextDecorationType.Underline, color: Color.Black })

.backgroundColor(0xE6F2FD)

.width('100%')

}

.width('100%')

}

.width('100%')

.height('100%')

}

}

TextDecorationTyp包含以下几种类型：

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

​编辑

示例代码：

@Entry@Component

struct Index {

@State message: string = 'HarmonyOS'

@State music_yanyuan: string = "说话的方式简单点,递进的情绪请省略,你又不是个演员,别设计那些情节,没意见," +

"我只想看看你怎么圆,你难过的太表面,像没天赋的演员,观众一眼能看见。"

build() {

Row() {

Column() {

Text(this.music_yanyuan) //文本超长显示

.fontSize(50)

.maxLines(2)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.decoration({ type: TextDecorationType.None, color: Color.Black })

.backgroundColor(0xE6F2FD)

.width('100%')

Text(this.music_yanyuan) //文本超长显示

.fontSize(50)

.decoration({ type: TextDecorationType.Overline, color: Color.Red })

.backgroundColor(0xE6F2FD)

.borderWidth(1).padding(10).margin(5)

Text(this.music_yanyuan) //文本超长显示

.fontSize(50)

.maxLines(2)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.decoration({ type: TextDecorationType.LineThrough, color: Color.Black })

.backgroundColor(0xE6F2FD)

.width('100%')

Text(this.music_yanyuan) //文本超长显示

.fontSize(50)

.maxLines(2)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.decoration({ type: TextDecorationType.Underline, color: Color.Black })

.backgroundColor(0xE6F2FD)

.width('100%')

}

.width('100%')

}

.width('100%')

.height('100%')

}

}

​