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

GeorgeGcs
• 阅读 7

【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文本组件,对于父组件位置的距离。 【HarmonyOS】鸿蒙应用开发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)
  }
}
点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Android开源控件ViewPager Indicator的使用方法
AndroidViewpagerIndicator是Android开发中最常用的控件之一,几乎所有的新闻类APP中都有使用,下面介绍其基本使用方法。!(http://static.oschina.net/uploads/img/201403/14220432_afb0.png)1\.ViewPagerIndicator的Lib
Wesley13 Wesley13
3年前
JavaFX入门:简单Demo
零、最终目标通过两种方式(纯代码控制、FXML),实现一个简单的登录界面:Paste\_Image.png涉及到的控件:文本(Text,动态显示内容)、标签(Label,显示文本)、文本域(TextField,用户交互输入)、按钮(Button,登录点击)一、控件通过Code动态添加实现方法
Stella981 Stella981
3年前
Python中tkinter中控件的使用(11,text文本框)
importtkinterwintkinter.Tk()win.title("text文本框")win.geometry("300x50600100")如果有窗体属性时滚动条只会显示上下,而不会有拖拉条'''文本控件,用于显示多行文本width行大小height垂直显示行数'''创建滚动条scrolltkinter.
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言在HarmonyOS5的应用开发模型中,featureAbility是旧版FA模型(FeatureAbility)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文
GeorgeGcs GeorgeGcs
1星期前
鸿蒙 6.0 引爆 AI 智能体革命:从交互重构到全场景智能觉醒,未来已至
【HarmonyOS5】鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言今天的华为开发者大会(2025HDC),全程看完,我只想说,震撼对于用户来说,一个未来场景的手机操作系统,正在诞生,从文本交互的操作转向自然语言,未来手机用
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙用户头像编辑功能实践
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言1、应用背景在鸿蒙化开发过程中,我们发现最基本常见的功能用户头像的编辑,实现方式和Android与IOS有极大的不同。在实际开发和调研的过程中,我们发现并总结了鸿蒙隐私处理与业内A
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙中进度条的使用详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、HarmonyOS中Progress进度条的类型HarmonyOS的ArkUI框架为开发者提供了多种类型的进度条,每种类型都有其独特的样式,以满足不同的设计需求。以下是几种常见的进度条
GeorgeGcs GeorgeGcs
7小时前
【HarmonyOS】富文本编辑器RichEditor详解
【HarmonyOS】富文本编辑器RichEditor详解一、前言在信息化高速发展的今天,普通的文本容器,已经不能够承载用户丰富的表达欲。富文本展示已经是移动开发中,必备要解决的问题,在鸿蒙中,通过在系统层提供RichEditor控件,来解决富文本展示的问
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言在HarmonyOS5的应用开发模型中,featureAbility是旧版FA模型(FeatureAbility)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】桌面快捷方式功能实现详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言在移动应用开发中,如何让用户快速触达核心功能,是目前很常见的功能之一。鸿蒙系统提供的桌面快捷方式(Shortcuts)功能,允许开发者为应用内常用功能创建直达入口,用户通过长按应用
GeorgeGcs
GeorgeGcs
Lv1
男 · 金融头部企业 · 鸿蒙应用架构师
HarmonyOS认证创作先锋,华为HDE专家,鸿蒙讲师,作者。目前任职鸿蒙应用架构师。 历经腾讯,宝马,研究所,金融。 待过私企,外企,央企。 深耕大应用开发领域十年。 AAE,Harmony(OpenHarmony\HarmonyOS),MAE(Android\IOS),FE(H5\Vue\RN)。
文章
64
粉丝
1
获赞
2