五、ArkTS 常用组件-文本显示 (Text / Span)

五、ArkTS 常用组件-文本显示 (Text / Span)

文本显示 (Text/Span):

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-common-components-text-display-V13

1. 概述

Text为文本组件，通常用于展示用户视图，如显示文章的文字

地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-text-V13

2. 参数

Text组件的参数类型为string | Resource，下面分别对两个参数类型进行介绍：

• string类型
  

Text('我是一段文本')

• Resource 类型
  

Resource类型的参数用于引用 resources/*/element目录中定义的字符串，同样需要使用$r()引用。

例如resources/base/element目录中有一个string.json文件，内容如下

{

 "string": [

   {

     "name": "module_desc",

     "value": "模块描述"

   },

   {

     "name": "EntryAbility_desc",

     "value": "description"

   },

   {

     "name": "EntryAbility_label",

     "value": "label"

   }

 ]

}

此时我们便可通过如下方式引用并显示module_desc的内容。

Text($r('app.string.module_desc'))

3. 常用属性

3.1. 字体大小

字体大小可通过fontSize()方法进行设置，该方法的参数类型为string | number| Resource，下面逐一介绍

• string类型
  

string类型的参数可用于指定字体大小的具体单位，例如fontSize('100px')，字体大小的单位支持px、fp。其中fp(font pixel)与vp类似，具体大小也会随屏幕的像素密度变化而变化。

• number类型
  

number类型的参数，默认以fp作为单位。

• Resource类型
  

Resource类型参数用于引用resources下的element目录中定义的数值。

Text($r('app.string.module_desc'))

.fontSize(50)

字体粗细

字体粗细可通过fontWeight()方法进行设置，该方法参数类型为number | FontWeight | string，下面逐一介绍

• number类型
  

number类型的取值范围是[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。

• FontWeight类型
  

FontWeight为枚举类型，可选枚举值如下

• string类型
  

string类型的参数仅支持number类型和FontWeight类型参数的字符串形式，例如例如'100'和bold。

Text('FontWeight.Lighter')

         .fontSize(30)

         .fontWeight(FontWeight.Lighter)

       Text('FontWeight.Normal')

         .fontSize(30)

         .fontWeight(FontWeight.Normal)

       Text('FontWeight.Regular')

         .fontSize(30)

         .fontWeight(FontWeight.Regular)

       Text('FontWeight.Medium')

         .fontSize(30)

         .fontWeight(FontWeight.Medium)

       Text('FontWeight.Bold')

         .fontSize(30)

         .fontWeight(FontWeight.Bold)

       Text('FontWeight.Bolder')

         .fontSize(30)

         .fontWeight(FontWeight.Bolder)

3.3. 字体颜色

字体颜色可通过fontColor()方法进行设置，该方法参数类型为Color | string | number | Resource，下面逐一介绍

• Color类型
  

Color`为枚举类型，其中包含了多种常用颜色，例如`Color.Green

• string类型
  

string`类型的参数可用于设置 **rgb** 格式的颜色，具体写法可以为`'rgb(0, 128, 0)'`或者`'#008000'

• number类型
  

number`类型的参数用于使用16进制的数字设置 **rgb** 格式的颜色，具体写法为`0x008000

• Resource类型
  

Resource类型的参数用于应用resources下的element目录中定义的值。

  Text('Color.Blue')

     .fontSize(30)

     .fontColor(Color.Blue)

   Text('Color.Gray')

     .fontSize(30)

     .fontColor(Color.Gray)

   Text('Color.Green')

     .fontSize(30)

     .fontColor(Color.Green)

   Text('Color.Red')

     .fontSize(30)

     .fontColor(Color.Red)

   Text('Color.Yellow')

     .fontSize(30)

     .fontColor(Color.Yellow)

   Text('Color.Black')

     .fontSize(30)

     .fontColor(Color.Black)

3.4. 文本对齐

文本对齐方向可通过textAlign()方法进行设置，该方法的参数为枚举类型TextAlign，可选的枚举值如下

各选项效果如下

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .textAlign(TextAlign.Center)

 .width(300)

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .textAlign(TextAlign.Start)

 .width(300)

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .textAlign(TextAlign.End)

 .width(300)

3.5. 最大行数和超长处理

可使用maxLines()方法控制文本的最大行数，当内容超出最大行数时，可使用textOverflow()方法处理超出部分，该方法的参数类型为{ overflow: TextOverflow }，其中TextOverflow为枚举类型，可用枚举值有

各选项效果如下

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .width(300)

Text('原始内容').textAlign(TextAlign.Center).width(300)

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .maxLines(3)

 .textOverflow({overflow:TextOverflow.Clip})

 .width(300)

Text('Clip').textAlign(TextAlign.Center).width(300)

Text($r('app.string.arkTS_msg'))

 .fontSize(18)

 .borderWidth(1)

 .maxLines(3)

 .textOverflow({overflow:TextOverflow.Ellipsis})

 .width(300)

Text('Ellipsis').textAlign(TextAlign.Center).width(300)

Text($r('app.string.arkTS_msg'))

     .fontSize(18)

     .borderWidth(1)

     .maxLines(3)

     .textOverflow({overflow:TextOverflow.MARQUEE})

     .width(300)

Text('MARQUEE').textAlign(TextAlign.Center).width(300)

子组件Span

Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

• 创建Span。
  Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

Text('我是Text') {

 Span('我是Span')

}

.padding(10)

.borderWidth(1)

• 
• 设置文本装饰线及颜色。
  通过decoration设置文本装饰线及颜色。

Text() {

 Span('我是Span1，')

   .fontSize(16)

   .fontColor(Color.Grey)

   .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })

 Span('我是Span2')

   .fontColor(Color.Blue)

   .fontSize(16)

   .fontStyle(FontStyle.Italic)

   .decoration({ type: TextDecorationType.Underline, color: Color.Black })

 Span('，我是Span3')

   .fontSize(16)

   .fontColor(Color.Grey)

   .decoration({ type: TextDecorationType.Overline, color: Color.Green })

• 
• 通过textCase设置文字一直保持大写或者小写状态。

Text() {

     Span('I am Upper-span')

       .fontSize(12)

       .textCase(TextCase.UpperCase)

   }

   .borderWidth(1)

   .padding(10)

• 
• 添加事件。
  由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。

       Text() {

         Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase).onClick(() => {

           console.info('我是Span——onClick')

         })

       }

公众号搜“Harry技术”,关注我,带你看不一样的人间烟火！