鸿蒙UI系统组件01——文本组件(Text/Span)
头像 蓝亭书序 2026-08-07 14:41:18    发布
0 浏览 0 点赞 0 收藏

1、概述

Text是文本组件，是我们开发UI界面中最常见的组件之一，通常用于展示用户的视图，如显示文章的文字。下面将对文本组件展开介绍。

2、创建文本

Text可通过以下两种方式来创建：

  • string字符串


Text('我是一段文本')

图片

  • 引用Resource资源资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。


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

图片

3、添加子组件

Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

  • 创建Span。

Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。


Text('我是Text') {
  Span('我是Span')
}
.padding(10)
.borderWidth(1)

图片

  • 设置文本装饰线及颜色。

通过decoration设置文本装饰线及颜色。


Text() {
  Span('我是Span1，').fontSize(16).fontColor(Color.Grey)
    .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
  Span('我是Span2').fontColor(Color.Blue).fontSize(16)
    .fontStyle(FontStyle.Italic)
    .decoration({ type: TextDecorationType.Underline, color: Color.Black })
  Span('，我是Span3').fontSize(16).fontColor(Color.Grey)
    .decoration({ type: TextDecorationType.Overline, color: Color.Green })
}
.borderWidth(1)
.padding(10)

图片

  • 通过textCase设置文字一直保持大写或者小写状态。


Text() {
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)

图片

  • 添加事件。

由于Span组件无尺寸信息，事件仅支持点击事件onClick。


Text() {
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
    .onClick(()=>{
      console.info('我是Span——onClick')
    })
}


4、自定义文本样式

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


Text('左对齐')
  .width(300)
  .textAlign(TextAlign.Start)
  .border({ width: 1 })
  .padding(10)
Text('中间对齐')
  .width(300)
  .textAlign(TextAlign.Center)
  .border({ width: 1 })
  .padding(10)
Text('右对齐')
  .width(300)
  .textAlign(TextAlign.End)
  .border({ width: 1 })
  .padding(10)

图片

  • 通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。


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('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。')
  .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 the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text with the line height set. This is the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
  .lineHeight(20)

图片

  • 通过decoration属性设置文本装饰线样式及其颜色。


Text('This is the text')
  .decoration({
    type: TextDecorationType.LineThrough,
    color: Color.Red
  })
  .borderWidth(1).padding(10).margin(5)
Text('This is the text')
  .decoration({
    type: TextDecorationType.Overline,
    color: Color.Red
  })
  .borderWidth(1).padding(10).margin(5)
Text('This is the text')
  .decoration({
    type: TextDecorationType.Underline,
    color: Color.Red
  })
  .borderWidth(1).padding(10).margin(5)

图片

  • 通过baselineOffset属性设置文本基线的偏移量。


Text('This is the text content with baselineOffset 0.')
  .baselineOffset(0)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)
Text('This is the text content with baselineOffset 30.')
  .baselineOffset(30)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)

Text('This is the text content with baselineOffset -20.')
  .baselineOffset(-20)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)

图片

  • 通过letterSpacing属性设置文本字符间距。


Text('This is the text content with letterSpacing 0.')
  .letterSpacing(0)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)
Text('This is the text content with letterSpacing 3.')
  .letterSpacing(3)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)
Text('This is the text content with letterSpacing -1.')
  .letterSpacing(-1)
  .fontSize(12)
  .border({ width: 1 })
  .padding(10)
  .width('100%')
  .margin(5)

图片

  • 通过minFontSize与maxFontSize自适应字体大小，minFontSize设置文本最小显示字号，maxFontSize设置文本最大显示字号，minFontSize与maxFontSize必须搭配同时使用，以及需配合maxline或布局大小限制一起使用，单独设置不生效。


Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为1')
  .width(250)
  .maxLines(1)
  .maxFontSize(30)
  .minFontSize(5)
  .border({ width: 1 })
  .padding(10)
  .margin(5)
Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为2')
  .width(250)
  .maxLines(2)
  .maxFontSize(30)
  .minFontSize(5)
  .border({ width: 1 })
  .padding(10)
  .margin(5)
Text('我的最大字号为30，最小字号为15，宽度为250,高度为50')
  .width(250)
  .height(50)
  .maxFontSize(30)
  .minFontSize(15)
  .border({ width: 1 })
  .padding(10)
  .margin(5)
Text('我的最大字号为30，最小字号为15，宽度为250,高度为100')
  .width(250)
  .height(100)
  .maxFontSize(30)
  .minFontSize(15)
  .border({ width: 1 })
  .padding(10)
  .margin(5)

图片

  • 通过textCase属性设置文本大小写。


Text('This is the text content with textCase set to Normal.')
  .textCase(TextCase.Normal)
  .padding(10)
  .border({ width: 1 })
  .padding(10)
  .margin(5)

// 文本全小写展示
Text('This is the text content with textCase set to LowerCase.')
  .textCase(TextCase.LowerCase)
  .border({ width: 1 })
  .padding(10)
  .margin(5)

// 文本全大写展示
Text('This is the text content with textCase set to UpperCase.')
  .textCase(TextCase.UpperCase)
  .border({ width: 1 })
  .padding(10)
  .margin(5)

图片

  • 通过copyOption属性设置文本是否可复制粘贴。


Text("这是一段可复制文本")
  .fontSize(30)
  .copyOption(CopyOptions.InApp)

图片

5、添加事件

Text组件可以添加通用事件，可以绑定onClick、onTouch等事件来响应操作。


Text('点我')
  .onClick(()=>{
      console.info('我是Text的点击响应事件');
   })


6、demo

效果图如下：

图片


// xxx.ets
@Entry
@Component
struct TextExample {
  build() {
    Column() {
      Row() {
        Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("我是热搜词条1")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(300)
        Text("爆")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0x770100)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("热")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0xCC5500)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })
        Text("我是热搜词条3")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .maxLines(1)
          .constraintSize({ maxWidth: 200 })
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("热")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(0xCC5500)
          .borderRadius(5)
          .width(15)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })
        Text("我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4")
          .fontSize(12)
          .fontColor(Color.Blue)
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }.width('100%').margin(5)
    }.width('100%')
  }
}



©本站发布的所有内容，包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等，除特别标明外，均来源于网络或用户投稿，版权归原作者或原出处所有。我们致力于保护原作者版权，若涉及版权问题，请及时联系我们进行处理。
分类
HarmonyOS
标签
UI系统组件
onClick
onTouch

相关推荐

鸿蒙生态伙伴 SDK专区 7 月上新合集来袭~
头像 鸿蒙小助手
283
0
鸿蒙应用表格式数据展示与排序组件开发
头像 小张同学
276
0
鸿蒙应用动画系统与过渡效果组件开发
头像 想变肌肉男
280
0
uni-app 鸿蒙暗黑模式适配：用 onThemeChange 监听系统主题
头像 在人间耕耘
574
0
鸿蒙应用路由导航与页面跳转管理方案
头像 Vant
585
0
头像

蓝亭书序

我还没有写个人简介......

22

帖子

0

提问

0

粉丝

关注
最新发布

ArkTs布局入门07——列表（List）

 2026-08-07 14:32:14    发布

ArkTs布局入门06——网格布局（Grid/GridItem）

 2026-08-07 14:30:52    发布
热门推荐
上一篇：ArkTs布局入门08——轮播（Swiper）
下一篇：鸿蒙UI系统组件02——按钮(Button)
地址:北京市朝阳区北三环东路三元桥曙光西里甲1号第三置业A座1508室 商务内容合作QQ：2291221 电话:13391790444或(010)62178877
版权所有:电脑商情信息服务集团 北京赢邦策略咨询有限责任公司
声明:本媒体部分图片、文章来源于网络，版权归原作者所有，我司致力于保护作者版权，如有侵权，请与我司联系删除

京ICP备:2022009079号-2

京公网安备:11010502051901号

ICP证:京B2-20230255