赞
踩
- build() {
- Row() {
- Column() {
- Text("你好,鸿蒙") // 文本内容
- .fontSize(50) // 文本大小
- .fontWeight(FontWeight.Bold) // 文本粗细
- .fontColor("#00C") // 文本颜色
- }
- .width('100%')
- }
- .height('100%')
- }
Text(content?: string | Resource)
入参:content是文本内容
在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三种。
- Text("你好,鸿蒙")
- .fontSize(50)
使用number类型时默认单位是fp,推荐使用;
- Text("你好,鸿蒙")
- .fontSize("30fp")
使用string类型时需要显示指定像素单位,如“30fp”;
- Text("你好,鸿蒙")
- .fontSize($r("app.float.text_size"))
使用Resource类型时,需要在resources目录下的float.json文件中定义文本大小;
- {
- "float": [
- {
- "name": "text_size",
- "value": "50fp"
- }
- ]
- }
使用fontWeight属性设置文本粗细,参数类型支持number、FontWeight两种。
- Text("你好,鸿蒙")
- .fontSize(50)
- .fontWeight(500)
number类型的初始值默认为400,其取值范围为100~900,取值间隔为100,取值越大,字体越粗。
- Text("你好,鸿蒙")
- .fontSize(50)
- .fontWeight(FontWeight.Medium)
名称 | 描述 |
---|---|
Lighter | 字体较细。 |
Normal | 字体粗细正常。 |
Regular | 字体粗细正常。 |
Medium | 字体粗细适中。 |
Bold | 字体较粗。 |
Bolder | 字体非常粗。 |
使用fontColor属性设置文本颜色,参数类型支持Color、number、string、Resource四种。
- Text("你好,鸿蒙")
- .fontColor(Color.Black)
- Text("你好,鸿蒙")
- .fontColor(0x182431)
- Text("你好,鸿蒙")
- .fontColor("#182431")
- 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)
number类型,设置文本的最大行数。默认值:Infinity。
默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 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包含以下几种类型:
其他文章:
HarmonyOS(一)之 TypeScript基础语法
HarmonyOS(二)之 Image组件
参考文章:HarmonyOS常用基础组件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。