阅读量:0
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)
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)
TextDecorationTyp包含以下几种类型：
None：不使用文本装饰线。
Overline：文字上划线修饰。
LineThrough：穿过文本的修饰线。
Underline：文字下划线修饰。
其他文章：
HarmonyOS（一）之 TypeScript基础语法
HarmonyOS（二）之 Image组件
参考文章：HarmonyOS常用基础组件
