HarmonyOS（三）之 Text组件
Text组件基本用法build() {
Row() {
Column() {
Text("你好，鸿蒙") // 文本内容
.fontSize(50) // 文本大小
.fontWeight(FontWeight.Bold) // 文本粗细
.fontColor("#00C") // 文本颜色
}
.width('100%')
}
.height('100%')
}一、设置文本内容
Text(content?: string | Resource)
入参：content是文本内容
1、使用string数据设置文本内容：Text("你好，鸿蒙")
2、使用Resource数据设置文本内容：Text($r("app.string.login_page"))
在resources目录下的string.json文件中界说字符串资源
{
"string": [
{
"name": "login_page",
"value": "你好，鸿蒙"
}
]
}补充
通过Resource类型设置内容时，resources目录下的base、en_US、zh_CN三个目录中的string.json文件都要添加该键值对，否则json文件会报错。根据设备信息匹配英文或中文，对应en_US或zh_CN中的json，实现国际化效果，如果没有匹配到，会走base的json。
二、设置文本大小
使用fontSize属性设置文本大小，参数类型支持number、string、Resource三种。
1、number
Text("你好，鸿蒙")
.fontSize(50)使用number类型时默认单位是fp，推荐使用；
2、string
Text("你好，鸿蒙")
.fontSize("30fp")使用string类型时需要表现指定像素单位，如“30fp”；
3、Resource
Text("你好，鸿蒙")
.fontSize($r("app.float.text_size"))使用Resource类型时，需要在resources目录下的float.json文件中界说文本大小；
{
"float": [
{
"name": "text_size",
"value": "50fp"
}
]
}三、设置文本粗细
使用fontWeight属性设置文本粗细，参数类型支持number、FontWeight两种。
1、number
Text("你好，鸿蒙")
.fontSize(50) .fontWeight(500)number类型的初始值默认为400，其取值范围为100～900，取值隔断为100，取值越大，字体越粗。
2、FontWeight 为内置枚举类型
Text("你好，鸿蒙")
.fontSize(50) .fontWeight(FontWeight.Medium) 名称
形貌
Lighter
字体较细。
Normal
字体粗细正常。
Regular
字体粗细正常。
Medium
字体粗细适中。
Bold
字体较粗。
Bolder
字体非常粗。
四、设置文本颜色
使用fontColor属性设置文本颜色，参数类型支持Color、number、string、Resource四种。
1、Color 颜色枚举值
Text("你好，鸿蒙")
.fontColor(Color.Black) 2、number 十六进制数
Text("你好，鸿蒙")
.fontColor(0x182431)3、string rgb大概rgba格式颜色
Text("你好，鸿蒙")
.fontColor("#182431")4、Resource
Text("你好，鸿蒙")
.fontColor($r("app.color.text_color"))使用Resource类型时，需要在resources目录下的color.json文件中界说文本颜色；
{
"color": [
{
"name": "text_color",
"value": "#182431"
}
]
}五、设置文本对齐方式
使用textAlign属性可以设置文本的对齐方式，textAlign参数类型为TextAlign，界说了以下几种类型：默认Start。
名称
形貌
Start
水平对齐首部。
Center
水平居中对齐。
End
水平对齐尾部。
示例代码如下：
Text("你好，鸿蒙")
.textAlign(TextAlign.Center)
.width('100%')六、设置文本超长表现
当文本内容较多超出了Text组件范围的时候，可以使用textOverflow设置文本截取方式，需共同maxLines使用，单独设置不生效，maxLines用于设置文本表现最大行数。下面的示例代码将textOverflow设置为Ellipsis ，它将表现不下的文本用 “...” 表现：
Text('This is the text content of Text Component This is the text content of Text Component')
.fontSize(16)
.maxLines(1)
.textOverflow({overflow:TextOverflow.Ellipsis})
.backgroundColor(0xE6F2FD)https://img-blog.csdnimg.cn/direct/88b42d3fd442489e901cfa3a88bd1754.png
maxLines
number类型，设置文本的最大行数。默认值：Infinity。
默认环境下，文本是自动折行的，如果指定此参数，则文本最多不会凌驾指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。
textOverflow
TextOverflow枚举类型
名称
形貌
Clip
文本超长时举行裁剪表现。
Ellipsis
文本超长时表现不下的文本用省略号代替。
None
文本超长时不举行裁剪。
注意：官方文档说使用None枚举时，超长文本不举行裁剪，但是在实际测试中发现None与Clip的效果一样，都会举行裁剪。有明白的大神可以指教一下。
七、设置文本装饰线
使用decoration设置文本装饰线样式及其颜色，例如带有下划线的超链接文本。decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationType，color为可选参数。
下面的示例代码给文本设置了下划线，下划线颜色为黑色：
Text('HarmonyOS')
.fontSize(20)
.decoration({ type: TextDecorationType.Underline, color: Color.Black })
.backgroundColor(0xE6F2FD)https://img-blog.csdnimg.cn/direct/471a7d1f6a824f45ae3ff3de379fd5e5.png
TextDecorationTyp包含以下几种类型：
None：不使用文本装饰线。
https://img-blog.csdnimg.cn/direct/fc34ec69852941de9f173d2d4e8100ba.png
Overline：文字上划线修饰。
https://img-blog.csdnimg.cn/direct/e141d69064de4278aaa4d02636de49ec.png
LineThrough：穿过文本的修饰线。
https://img-blog.csdnimg.cn/direct/ef8e6ad400464aaebaf7c8d2bbb25e52.png
Underline：文字下划线修饰。
https://img-blog.csdnimg.cn/direct/649b289764454d34941b6293eb6733ba.png
其他文章：
HarmonyOS（一）之 TypeScript基础语法
HarmonyOS（二）之 Image组件
参考文章：HarmonyOS常用基础组件
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]