【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@Componentstruct 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} })
复制代码
根据最底部的源码，我们运行完整的代码后，可根据示例效果，得出以下结论：alignalign 属性，是一个通用属性，可以设置容器内的子元素对齐方式。所有容器组件都有该属性。
textAlign 文本组件独有的属性，设置组件的文本内容的对齐方式。
alignSelf 非相对布局以外的其他父布局，该属性设置后会生效。组件自身在父容器中的对齐方式。
alignRules 只有组件的父布局是相对布局 RelativeContainer 时，该属性才会生效。属性设置相对定位规则。
当父容器为 RelativeContainer，且子组件设置了 alignRules 属性时，子组件的 position 属性不生效。关联第二个问题。
五、源码如下所示：
@Entry@Componentstruct 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) }}
复制代码
评论