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

Harry技术
186 阅读2分钟

文本显示 (Text / Span)

文本显示 (Text/Span):

developer.huawei.com/consumer/cn…

1. 概述

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

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为枚举类型，可选枚举值如下

名称描述
FontWeight.Lighter字体较细。
FontWeight.Normal字体粗细正常。
FontWeight.Regular字体粗细正常。
FontWeight.Medium字体粗细适中。
FontWeight.Bold字体较粗。
FontWeight.Bolder字体非常粗。
  • 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)

image-20241209145136365

image-20241209145136365

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，可选的枚举值如下

名称描述
TextAlign.Start首部对齐
TextAlign.Center居中对齐
TextAlign.End尾部对齐

各选项效果如下

image-20241209151719222

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为枚举类型，可用枚举值有

名称描述
TextOverflow.Clip文本超长时，进行裁剪显示。
TextOverflow.Ellipsis文本超长时，显示不下的文本用省略号代替。
TextOverflow.MARQUEE文本溢出其尺寸时，文本将滚动显示

各选项效果如下

image-20241209151719222

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)

    img

    img

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

    通过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 })

    img

    img

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

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

    img

    img

  • 添加事件。

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

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

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

avatar
文章
阅读
粉丝