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

【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)}
}