五、ArkTS 常用组件-文本显示 (Text / Span)
文本显示 (Text/Span):
1. 概述
Text为文本组件，通常用于展示用户视图，如显示文章的文字
地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-text-V13
2. 参数
Text组件的参数类型为string | Resource，下面分别对两个参数类型进行介绍：
- string类型
Text('我是一段文本')
- Resource 类型
Resource类型的参数用于引用 resources/*/element目录中定义的字符串，同样需要使用$r()引用。
例如resources/base/element目录中有一个string.json文件，内容如下
{
"string": [
{
"name": "module_desc",
"value": "模块描述"
},
{
"name": "EntryAbility_desc",
"value": "description"
},
{
"name": "EntryAbility_label",
"value": "label"
}
]
}
此时我们便可通过如下方式引用并显示module_desc的内容。
Text($r('app.string.module_desc'))
3. 常用属性
3.1. 字体大小
字体大小可通过fontSize()方法进行设置，该方法的参数类型为string | number| Resource，下面逐一介绍
- string类型
string类型的参数可用于指定字体大小的具体单位，例如fontSize('100px')，字体大小的单位支持px、fp。其中fp(font pixel)与vp类似，具体大小也会随屏幕的像素密度变化而变化。
- number类型
number类型的参数，默认以fp作为单位。
- Resource类型
Resource类型参数用于引用resources下的element目录中定义的数值。
Text($r('app.string.module_desc'))
.fontSize(50)
字体粗细
字体粗细可通过fontWeight()方法进行设置，该方法参数类型为number | FontWeight | string，下面逐一介绍
- number类型
number类型的取值范围是[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。
- FontWeight类型
FontWeight为枚举类型，可选枚举值如下
| 名称 | 描述 |
FontWeight.Lighter |
字体较细。 |
FontWeight.Normal |
字体粗细正常。 |
FontWeight.Regular |
字体粗细正常。 |
FontWeight.Medium |
字体粗细适中。 |
FontWeight.Bold |
字体较粗。 |
FontWeight.Bolder |
字体非常粗。 |
- string类型
string类型的参数仅支持number类型和FontWeight类型参数的字符串形式，例如例如'100'和bold。
Text('FontWeight.Lighter')
.fontSize(30)
.fontWeight(FontWeight.Lighter)
Text('FontWeight.Normal')
.fontSize(30)
.fontWeight(FontWeight.Normal)
Text('FontWeight.Regular')
.fontSize(30)
.fontWeight(FontWeight.Regular)
Text('FontWeight.Medium')
.fontSize(30)
.fontWeight(FontWeight.Medium)
Text('FontWeight.Bold')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Text('FontWeight.Bolder')
.fontSize(30)
.fontWeight(FontWeight.Bolder)
3.3. 字体颜色
字体颜色可通过fontColor()方法进行设置，该方法参数类型为Color | string | number | Resource，下面逐一介绍
- Color类型
Color`为枚举类型，其中包含了多种常用颜色，例如`Color.Green
- string类型
string`类型的参数可用于设置 **rgb** 格式的颜色，具体写法可以为`'rgb(0, 128, 0)'`或者`'#008000'
- number类型
number`类型的参数用于使用16进制的数字设置 **rgb** 格式的颜色，具体写法为`0x008000
- Resource类型
Resource类型的参数用于应用resources下的element目录中定义的值。
Text('Color.Blue')
.fontSize(30)
.fontColor(Color.Blue)
Text('Color.Gray')
.fontSize(30)
.fontColor(Color.Gray)
Text('Color.Green')
.fontSize(30)
.fontColor(Color.Green)
Text('Color.Red')
.fontSize(30)
.fontColor(Color.Red)
Text('Color.Yellow')
.fontSize(30)
.fontColor(Color.Yellow)
Text('Color.Black')
.fontSize(30)
.fontColor(Color.Black)
3.4. 文本对齐
文本对齐方向可通过textAlign()方法进行设置，该方法的参数为枚举类型TextAlign，可选的枚举值如下
| 名称 | 描述 |
TextAlign.Start |
首部对齐 |
TextAlign.Center |
居中对齐 |
TextAlign.End |
尾部对齐 |
各选项效果如下
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.textAlign(TextAlign.Center)
.width(300)
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.textAlign(TextAlign.Start)
.width(300)
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.textAlign(TextAlign.End)
.width(300)
3.5. 最大行数和超长处理
可使用maxLines()方法控制文本的最大行数，当内容超出最大行数时，可使用textOverflow()方法处理超出部分，该方法的参数类型为{ overflow: TextOverflow }，其中TextOverflow为枚举类型，可用枚举值有
| 名称 | 描述 |
TextOverflow.Clip |
文本超长时，进行裁剪显示。 |
TextOverflow.Ellipsis |
文本超长时，显示不下的文本用省略号代替。 |
TextOverflow.MARQUEE |
文本溢出其尺寸时，文本将滚动显示 |
各选项效果如下
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.width(300)
Text('原始内容').textAlign(TextAlign.Center).width(300)
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.maxLines(3)
.textOverflow({overflow:TextOverflow.Clip})
.width(300)
Text('Clip').textAlign(TextAlign.Center).width(300)
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.maxLines(3)
.textOverflow({overflow:TextOverflow.Ellipsis})
.width(300)
Text('Ellipsis').textAlign(TextAlign.Center).width(300)
Text($r('app.string.arkTS_msg'))
.fontSize(18)
.borderWidth(1)
.maxLines(3)
.textOverflow({overflow:TextOverflow.MARQUEE})
.width(300)
Text('MARQUEE').textAlign(TextAlign.Center).width(300)
子组件Span
Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。
- 创建Span。
Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。
Text('我是Text') {
Span('我是Span')
}
.padding(10)
.borderWidth(1)
-
- 设置文本装饰线及颜色。
通过decoration设置文本装饰线及颜色。
Text() {
Span('我是Span1，')
.fontSize(16)
.fontColor(Color.Grey)
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
Span('我是Span2')
.fontColor(Color.Blue)
.fontSize(16)
.fontStyle(FontStyle.Italic)
.decoration({ type: TextDecorationType.Underline, color: Color.Black })
Span('，我是Span3')
.fontSize(16)
.fontColor(Color.Grey)
.decoration({ type: TextDecorationType.Overline, color: Color.Green })
-
- 通过textCase设置文字一直保持大写或者小写状态。
Text() {
Span('I am Upper-span')
.fontSize(12)
.textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)
-
- 添加事件。
由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。
Text() {
Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase).onClick(() => {
console.info('我是Span——onClick')
})
}
公众号搜“Harry技术”,关注我,带你看不一样的人间烟火！
