HarmonyOS（三）之 Text组件

Text组件基本用法

  

1. build() {
2.     Row() {
3.       Column() {
4.         Text("你好，鸿蒙")   // 文本内容
5.           .fontSize(50)    // 文本大小
6.           .fontWeight(FontWeight.Bold)    // 文本粗细
7.           .fontColor("#00C")    // 文本颜色
8.       }
9.       .width('100%')
10.     }
11.     .height('100%')
12.   }

复制代码

一、设置文本内容

Text(content?: string | Resource)
入参：content是文本内容
1、使用string数据设置文本内容：Text("你好，鸿蒙")

2、使用Resource数据设置文本内容：Text($r("app.string.login_page"))

在resources目录下的string.json文件中界说字符串资源
  

1. {
2.   "string": [
3.     {
4.       "name": "login_page",
5.       "value": "你好，鸿蒙"
6.     }
7.   ]
8. }

复制代码

补充

通过Resource类型设置内容时，resources目录下的base、en_US、zh_CN三个目录中的string.json文件都要添加该键值对，否则json文件会报错。根据设备信息匹配英文或中文，对应en_US或zh_CN中的json，实现国际化效果，如果没有匹配到，会走base的json。
二、设置文本大小

使用fontSize属性设置文本大小，参数类型支持number、string、Resource三种。
 1、number

  

1. Text("你好，鸿蒙")
2.     .fontSize(50)

复制代码

使用number类型时默认单位是fp，推荐使用；
2、string

  

1. Text("你好，鸿蒙")
2.     .fontSize("30fp")

复制代码

使用string类型时需要表现指定像素单位，如“30fp”；
3、Resource

  

1. Text("你好，鸿蒙")
2.     .fontSize($r("app.float.text_size"))

复制代码

使用Resource类型时，需要在resources目录下的float.json文件中界说文本大小；
  

1. {
2.   "float": [
3.     {
4.       "name": "text_size",
5.       "value": "50fp"
6.     }
7.   ]
8. }

复制代码

三、设置文本粗细

使用fontWeight属性设置文本粗细，参数类型支持number、FontWeight两种。
 1、number

  

1. Text("你好，鸿蒙")
2.     .fontSize(50)    .fontWeight(500)

复制代码

number类型的初始值默认为400，其取值范围为100～900，取值隔断为100，取值越大，字体越粗。
2、FontWeight 为内置枚举类型

  

1. Text("你好，鸿蒙")
2.     .fontSize(50)    .fontWeight(FontWeight.Medium)

复制代码

  名称
  形貌
  Lighter
  字体较细。
  Normal
  字体粗细正常。
  Regular
  字体粗细正常。
  Medium
  字体粗细适中。
  Bold
  字体较粗。
  Bolder
  字体非常粗。
  
四、设置文本颜色

使用fontColor属性设置文本颜色，参数类型支持Color、number、string、Resource四种。
 1、Color 颜色枚举值

  

1. Text("你好，鸿蒙")
2.     .fontColor(Color.Black)

复制代码

  2、number 十六进制数

  

1. Text("你好，鸿蒙")
2.     .fontColor(0x182431)

复制代码

3、string rgb大概rgba格式颜色

  

1. Text("你好，鸿蒙")
2.     .fontColor("#182431")

复制代码

4、Resource

  

1. Text("你好，鸿蒙")
2.     .fontColor($r("app.color.text_color"))

复制代码

使用Resource类型时，需要在resources目录下的color.json文件中界说文本颜色；
  

1. {
2.   "color": [
3.     {
4.       "name": "text_color",
5.       "value": "#182431"
6.     }
7.   ]
8. }

复制代码

五、设置文本对齐方式

使用textAlign属性可以设置文本的对齐方式，textAlign参数类型为TextAlign，界说了以下几种类型：默认Start。
  名称
  形貌
  Start
  水平对齐首部。
  Center
  水平居中对齐。
  End
  水平对齐尾部。
  示例代码如下：
  

1. Text("你好，鸿蒙")
2.     .textAlign(TextAlign.Center)
3.     .width('100%')

复制代码

六、设置文本超长表现

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

1. Text('This is the text content of Text Component This is the text content of Text Component')
2.   .fontSize(16)
3.   .maxLines(1)
4.   .textOverflow({overflow:TextOverflow.Ellipsis})
5.   .backgroundColor(0xE6F2FD)

复制代码

maxLines

number类型，设置文本的最大行数。默认值：Infinity。
默认环境下，文本是自动折行的，如果指定此参数，则文本最多不会凌驾指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。
textOverflow

TextOverflow枚举类型
  名称
  形貌
  Clip
  文本超长时举行裁剪表现。
  Ellipsis
  文本超长时表现不下的文本用省略号代替。
  None
  文本超长时不举行裁剪。
  
注意：官方文档说使用None枚举时，超长文本不举行裁剪，但是在实际测试中发现None与Clip的效果一样，都会举行裁剪。有明白的大神可以指教一下。

七、设置文本装饰线

使用decoration设置文本装饰线样式及其颜色，例如带有下划线的超链接文本。decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationType，color为可选参数。
下面的示例代码给文本设置了下划线，下划线颜色为黑色：
  

1. Text('HarmonyOS')
2.     .fontSize(20)
3.     .decoration({ type: TextDecorationType.Underline, color: Color.Black })
4.     .backgroundColor(0xE6F2FD)

复制代码

TextDecorationTyp包含以下几种类型： 
None：不使用文本装饰线。

Overline：文字上划线修饰。

LineThrough：穿过文本的修饰线。

Underline：文字下划线修饰。

其他文章：
HarmonyOS（一）之 TypeScript基础语法​​​​​​​
​​​​​​​HarmonyOS（二）之 Image组件​​​​​​​
​​​​​​​参考文章：HarmonyOS常用基础组件​​​​​​​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。