HarmonyOS | UI开发 (一) | 基础组件(Text/Span，TextInput/TextArea，Button，Image)

本文链接：https://blog.youkuaiyun.com/tanzuai/article/details/136482499

本文详细介绍了鸿蒙操作系统中Text、Span、TextInput、TextArea、Button和Image等基础组件的创建、样式定制以及事件处理，助力开发者提升鸿蒙应用开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、基础组件
二、总结

个人博客主页 ：谭祖爱 & 技术博客

项目实例地址 ： RecordHarmonyOSProject

前言

鸿蒙操作系统作为华为推出的全新分布式操作系统，为开发者提供了丰富的组件库，使得开发者能够快速构建功能强大、界面美观的应用程序。本文将深入探讨鸿蒙应用开发中常用的组件，帮助开发者更好地理解和应用这些组件，提升开发效率和用户体验。

一、基础组件

基础组件：Text/Span，TextInput/TextArea，Button，Image

1.1.Text的概述

Text是文本组件，通常用于展示用户的视图，如显示文章的文字

1.2.Text的创建方式

Text创建方式：1.string字符串，2.引用Resource资源

- string字符串创建

Text('我是一段文本')

- 引用Resource资源

通过 $r('app.string.xxx') 引用 string.json 文件中的 xxx(属性名) 对于的值

Text($r('app.string.app_name'))
        .baselineOffset(0)
        .fontSize(30)
        .border({
    width: 1 })
        .padding(10)
        .width(300)

1.3.Text自定义文本样式

- 通过textAlign属性设置文本对齐样式

Text('左对齐')
  .width(300)
  .textAlign(TextAlign.Start)

Text('中间对齐')
  .width(300)
  .textAlign(TextAlign.Center)

Text('右对齐')
  .width(300)
  .textAlign(TextAlign.End)

- 通过textOverflow属性控制文本超长处理

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({
   overflow:TextOverflow.None})
          .maxLines(1)
          .fontSize(12)
          .border({
   width:1}).padding(10)

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({
   overflow:TextOverflow.Ellipsis})
          .maxLines(1)
          .fontSize(12)
          .border({
   width:1}).padding(10)

- 通过lineHeight属性设置文本行高

Text('This is the text with the line height set. This is