【HarmonyOS】鸿蒙应用开发Text控件常见错误

一、前言

Text文本控件，是我们应用开发中最为基本和常见使用的控件之一。很多人觉得对于控件的使用已经非常熟悉，一个文本控件，能有什么使用错误呢？其实不然，今天本文，就对于Text常用会导致问题的点进行阐述。

二、Text设置字体大小是否可用于百分号？

对于初学者最常见的问题之一，就是使用Text的fontSize属性设置字体大小时，传入百分比字符串作为参数。

首先结论是不允许这样设置，文本控件的字体大小参数，接收number类型和字符串string类型。但是字符串类型，只能是数字➕单位。例如 "20vp"。

设置为百分比字符串，运行和编译都不会报错，只是字体大小会是默认大小。

typescript 复制代码

          // 设置文本字体大小为父容器的9
        .fontSize("%9") X
		
		 .fontSize("20vp") ✔

对于为什么会让人误解如何设置，多半是因为控件的宽高属性可以设置百分比。

typescript 复制代码

        .width("80%")
        .height("80%")

三、如何设置Text组件的Position定位？

首先我们要清楚，position属性是做什么的呢？该属性，见名知意，是设置组件的空间绝对位置。

什么叫绝对位置呢？是确定子组件相对父组件内容区的位置。父组件内容区的大小为父组件大小减去border、padding、safeAreaPadding提供给子组件可布局的内容区域大小。

position属性参数类型是多种类型，可以接受｛x,y｝亦或者四边设置，例如以下代码所示：

typescript 复制代码

        .position({
          top: px2vp(20),
          right: px2vp(20)
        })

我们在完整代码中运行，可得出结论。四边设置是Text文本组件，对于父组件位置的距离。

typescript 复制代码

@Entry
@Component
struct Index {
  // 定义一个响应式状态变量message，初始值为'Hello World'
  // 当该变量值发生变化时，使用它的UI组件会自动更新
  @State message: string = 'Hello World';

  build() {
    // 创建一个相对容器，作为根布局组件
    RelativeContainer() {
      // 创建一个文本组件，显示message状态变量的值
      Text(this.message)
        .width("80%")
        .height("80%")
          // 设置文本组件背景颜色为红色
        .backgroundColor(Color.Red)
          // 设置文本组件在相对容器中的位置
        .position({
          top: px2vp(20),
          right: px2vp(20)
        })
          // 将文本内容在组件内居中对齐
        .align(Alignment.Center)
          // 设置文本在水平方向上居中对齐
        .textAlign(TextAlign.Center)
          // 为文本组件添加点击事件监听器
        .onClick(() => {
          // 点击时更新message状态变量的值为'Welcome'
          // 这将触发UI重新渲染以显示新的文本内容
          this.message = 'Welcome';
        })
    }
    // 设置相对容器高度为父容器的100%
    .height('100%')
    // 设置相对容器宽度为父容器的100%
    .width('100%')
    // 设置相对容器背景颜色为蓝色
    .backgroundColor(Color.Blue)
  }
}

四、Text如何设置对齐属性呢？

有同学肯定会说，这个我会，设置textAligin为TextAlign.Center即可，那请问下面这几种设置方式有什么区别呢？

typescript 复制代码

        .align(Alignment.Center)

        .textAlign(TextAlign.Center)

        .alignSelf(ItemAlign.Center)

        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center}
        })

根据最底部的源码，我们运行完整的代码后，可根据示例效果，得出以下结论：
align

align属性，是一个通用属性，可以设置容器内的子元素对齐方式。所有容器组件都有该属性。

textAlign

文本组件独有的属性，设置组件的文本内容的对齐方式。

alignSelf

非相对布局以外的其他父布局，该属性设置后会生效。组件自身在父容器中的对齐方式。

alignRules

只有组件的父布局是相对布局RelativeContainer时，该属性才会生效。属性设置相对定位规则。

当父容器为RelativeContainer，且子组件设置了alignRules属性时，子组件的position属性不生效。关联第二个问题。

五、源码如下所示：

typescript 复制代码

@Entry
@Component
struct Index {
  // 定义一个响应式状态变量message，初始值为'Hello World'
  // 当该变量值发生变化时，使用它的UI组件会自动更新
  @State message: string = 'Hello World';

  build() {
    // 创建一个相对容器，作为根布局组件
    RelativeContainer() {
      // 创建一个文本组件，显示message状态变量的值
      Text(this.message)
        // 设置文本字体为粗体
        .fontWeight(FontWeight.Bold)
        // 设置文本组件宽度为500px转换后的视口单位值
        .width(px2vp(500))
        // 设置文本组件高度为500px转换后的视口单位值
        .height(px2vp(500))
        // 设置文本组件背景颜色为红色
        .backgroundColor(Color.Red)
        // 为文本组件设置唯一标识符，用于后续操作或测试
        .id('IndexHelloWorld')
        // 设置文本字体大小
        .fontSize(px2fp(28))
        // 设置文本组件在相对容器中的位置
        .position({
          x: px2vp(20),
          y: px2vp(20)
        })
        // 将文本内容在组件内居中对齐
        .align(Alignment.Center)
        // 设置文本在水平方向上居中对齐
        .textAlign(TextAlign.Center)
        // 将文本组件自身在父容器中居中对齐
        .alignSelf(ItemAlign.Center)
        // 设置相对定位规则，使文本组件在父容器中垂直和水平都居中
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center}
        })
        // 为文本组件添加点击事件监听器
        .onClick(() => {
          // 点击时更新message状态变量的值为'Welcome'
          // 这将触发UI重新渲染以显示新的文本内容
          this.message = 'Welcome';
        })
    }
    // 设置相对容器高度为父容器的100%
    .height('100%')
    // 设置相对容器宽度为父容器的100%
    .width('100%')
    // 设置相对容器背景颜色为蓝色
    .backgroundColor(Color.Blue)
  }
}