五、ArkTS 常用组件

五、ArkTS 常用组件

文本显示 (Text / Span)

文本显示 (Text/Span):

1. 概述

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

2. 参数

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

• string类型

代码语言：javascript代码运行次数：0运行复制

Text('我是一段文本')

• Resource 类型

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

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

代码语言：javascript代码运行次数：0运行复制

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    }
  ]
}

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

代码语言：javascript代码运行次数：0运行复制

Text($r('app._desc'))

. 常用属性

.1. 字体大小

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

• string类型

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

• number类型

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

• Resource类型

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

代码语言：javascript代码运行次数：0运行复制

Text($r('app._desc')) .fontSize(50)

字体粗细

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

• number类型

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

• FontWeight类型

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

代码语言：javascript代码运行次数：0运行复制

字体较细。

• string类型

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

代码语言：javascript代码运行次数：0运行复制

 Text('FontWeight.Lighter')
          .fontSize(0)
          .fontWeight(FontWeight.Lighter)

        Text('')
          .fontSize(0)
          .fontWeight()

        Text('FontWeight.Regular')
          .fontSize(0)
          .fontWeight(FontWeight.Regular)

        Text('FontWeight.Medium')
          .fontSize(0)
          .fontWeight(FontWeight.Medium)

        Text('FontWeight.Bold')
          .fontSize(0)
          .fontWeight(FontWeight.Bold)

        Text('FontWeight.Bolder')
          .fontSize(0)
          .fontWeight(FontWeight.Bolder)

.. 字体颜

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

• Color类型

代码语言：javascript代码运行次数：0运行复制

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

• string类型

代码语言：javascript代码运行次数：0运行复制

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

• number类型

代码语言：javascript代码运行次数：0运行复制

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

• Resource类型

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

代码语言：javascript代码运行次数：0运行复制

   Text('Color.Blue')
      .fontSize(0)
      .fontColor(Color.Blue)

    Text('Color.Gray')
      .fontSize(0)
      .fontColor(Color.Gray)

    Text('Color.Green')
      .fontSize(0)
      .fontColor(Color.Green)

    Text('Color.Red')
      .fontSize(0)
      .fontColor(Color.Red)

    Text('Color.Yellow')
      .fontSize(0)
      .fontColor(Color.Yellow)

    Text('Color.Black')
      .fontSize(0)
      .fontColor(Color.Black)

.4. 文本对齐

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

代码语言：javascript代码运行次数：0运行复制

首部对齐

各选项效果如下

代码语言：javascript代码运行次数：0运行复制

Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .textAlign(TextAlign.Center)
  .width(00)

Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .textAlign(TextAlign.Start)
  .width(00)

Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .textAlign(TextAlign.End)
  .width(00)

.5. 最大行数和超长处理

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

代码语言：javascript代码运行次数：0运行复制

文本超长时，进行裁剪显示。

各选项效果如下

代码语言：javascript代码运行次数：0运行复制

Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .width(00)
Text('原始内容').textAlign(TextAlign.Center).width(00)

Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .maxLines()
  .textOverflow({overflow:TextOverflow.Clip})
  .width(00)
Text('Clip').textAlign(TextAlign.Center).width(00)


Text($r('app.string.arkTS_msg'))
  .fontSize(18)
  .borderWidth(1)
  .maxLines()
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .width(00)
Text('Ellipsis').textAlign(TextAlign.Center).width(00)

Text($r('app.string.arkTS_msg'))
      .fontSize(18)
      .borderWidth(1)
      .maxLines()
      .textOverflow({overflow:TextOverflow.MARQUEE})
      .width(00)
Text('MARQUEE').textAlign(TextAlign.Center).width(00)

子组件Span

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

创建Span。

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

代码语言：javascript代码运行次数：0运行复制

Text('我是Text') {
  Span('我是Span')
}
.padding(10)
.borderWidth(1)

img

设置文本装饰线及颜。

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

代码语言：javascript代码运行次数：0运行复制

 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('，我是Span')
    .fontSize(16)
    .fontColor(Color.Grey)
    .decoration({ type: TextDecorationType.Overline, color: Color.Green })

img

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

代码语言：javascript代码运行次数：0运行复制

 Text() {
      Span('I am Upper-span')
        .fontSize(12)
        .textCase(TextCase.UpperCase)
    }
    .borderWidth(1)
    .padding(10)

img

添加事件。

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

代码语言：javascript代码运行次数：0运行复制

        Text() {
          Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase).onClick(() => {
            cole.info('我是Span——onClick')
          })
        }

本文参与 腾讯云自媒体同步曝光计划，分享自。原始发表：2024-12-10，如有侵权请联系 cloudcommunity@tencent 删除textwidth事件字符串string