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

一、前言

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

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

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

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

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

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

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


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

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

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

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

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

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

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

在这里插入图片描述

@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即可,那请问下面这几种设置方式有什么区别呢?

        .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属性不生效。关联第二个问题。

五、源码如下所示:


@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)
  }
}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐