当前位置：首页 > article >正文

鸿蒙next版开发：ArkTS组件通用属性（文本通用）

article 2024/11/16 22:02:10

在HarmonyOS 5.0中，ArkTS提供了一系列的文本通用属性，这些属性可以应用于文本组件，以实现丰富的文本显示和样式效果。本文将详细解读这些通用属性，并提供示例代码进行说明。

文本通用属性

textAlign属性

textAlign属性用于设置文本的对齐方式。这个属性在文本组件的宽度大于文本内容长度时才起作用。TextAlign定义了以下三种类型：

Start（默认值）：根据文字书写方向对齐，例如中文从左往右排版，则文本靠左对齐。
Center：文本居中对齐。
End：根据文字书写相反的方向对齐，例如中文从左往右排版，则文本靠右对齐。

Text("Hello, OpenHarmony")
  .backgroundColor('#aabbcc')
  .textAlign(TextAlign.Center); // 文本居中对齐

maxLines和textOverflow属性

maxLines属性用于设置文本显示的最大行数，而textOverflow属性用于指定超出最大行数时文本的截取方式。如果设置了maxLines，则文本最多显示到指定的行，多余的文本可以通过textOverflow来指定截取方式。

Text('Hello, OpenHarmony, Hello, OpenHarmony')
  .maxLines(1) // 最大显示1行
  .textOverflow({overflow: TextOverflow.Ellipsis}); // 超出部分显示省略号

fontSize、fontColor、fontStyle和fontWeight属性

这些属性分别用于设置文本的大小、颜色、样式和粗细。可以组合使用这些属性来设置文本的富文本样式。

Text('Bold and large text')
  .fontSize(20) // 设置字体大小
  .fontColor(Color.Red) // 设置字体颜色
  .fontWeight(FontWeight.Bold); // 设置字体为粗体

fontFamily属性

fontFamily属性用于设置字体列表。默认字体为'HarmonyOS Sans'，应用当前支持'HarmonyOS Sans'字体和注册自定义字体。

Text('Custom font family')
  .fontFamily('HarmonyOS Sans'); // 设置字体为HarmonyOS Sans

lineHeight属性

lineHeight属性用于设置文本的行高。设置值不大于0时，不限制文本行高，自适应字体大小。

Text('Line height example')
  .lineHeight(24); // 设置行高为24

letterSpacing属性

letterSpacing属性用于设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。

Text('Letter spacing example')
  .letterSpacing(2); // 设置字符间距为2

decoration属性

decoration属性用于设置文本装饰线类型样式及其颜色。

Text('Text decoration example')
  .decoration({
    type: TextDecorationType.Underline, // 下划线
    color: Color.Blue, // 装饰线颜色为蓝色
    style: TextDecorationStyle.Dashed // 装饰线样式为虚线
  });

示例代码

以下是一个ArkTS文本组件通用属性的完整示例：

@Entry
@Component
struct TextExample {
  build() {
    Column() {
      Text('Hello, OpenHarmony')
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontSize(16)
        .fontColor(Color.Black)
        .maxLines(1)
        .textOverflow({overflow: TextOverflow.Ellipsis});

      Text('Bold and large text')
        .fontSize(20)
        .fontWeight(FontWeight.Bold);

      Text('Custom font family')
        .fontFamily('HarmonyOS Sans');

      Text('Line height example')
        .lineHeight(24);

      Text('Letter spacing example')
        .letterSpacing(2);

      Text('Text decoration example')
        .decoration({
          type: TextDecorationType.Underline,
          color: Color.Blue,
          style: TextDecorationStyle.Dashed
        });
    }
    .width('100%')
    .height('100%')
    .padding(20);
  }
}

在这个示例中，我们创建了一个包含多种文本样式的列容器。通过设置不同的文本通用属性，我们可以轻松地为文本组件添加各种视觉效果。