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)

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常用基础组件​​​​​​​