鸿蒙UI系统组件01——文本组件(Text/Span)

鸿蒙自习室2024-12-15 17:08

如果你也对鸿蒙开发感兴趣，加入"Harmony自习室"吧！点击下面的名片关注公众号。

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%')
  }
}
相关推荐
小学生波波14 小时前
HarmonyOS6 - 鸿蒙录音实时转文字案例
鸿蒙·录音·鸿蒙开发·录音转文字·harmonyos6
小学生波波15 小时前
HarmonyOS6 - 鸿蒙ArkUI动画详解
华为·arkts·鸿蒙·arkui·鸿蒙开发·harmonyos6
小学生波波20 小时前
HarmonyOS6 - 鸿蒙读取系统联系人实战案例
arkts·鸿蒙开发·harmonyos6·读取联系人
小学生波波21 小时前
HarmonyOS6 - 鸿蒙双向滚动课程表案例
list·scroll·鸿蒙开发·课程表·harmonyos6
小学生波波2 天前
HarmonyOS6 - 鸿蒙CustomDialog封装信息提示框
arkts·鸿蒙·鸿蒙开发·harmonyos6·信息提示框
小学生波波2 天前
HarmonyOS - 鸿蒙开发百度地图案例
地图·百度地图·路线规划·鸿蒙开发·harmonyos6·鸿蒙地图·打点
小学生波波3 天前
最新版鸿蒙开发工具DevEco Studio保姆级安装教程
arkts·鸿蒙系统·安装教程·deveco studio·鸿蒙开发·harmonyos6
编程乐学3 天前
鸿蒙非原创--DevEcoStudio开发的奶茶点餐APP
华为·harmonyos·deveco studio·鸿蒙开发·奶茶点餐·鸿蒙大作业
小学生波波4 天前
HarmonyOS6 - 弹框选择年份和月份实战案例
鸿蒙·鸿蒙开发·弹窗组件·harmonyos6·选择年份
小学生波波4 天前
HarmonyOS6 - Progress进度条组件案例
arkts·鸿蒙系统·鸿蒙开发·progress·harmonyos6·进度条组件
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）04UV安装并设置国内源05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07BongoCat - 跨平台键盘猫动画工具08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Claude Code Skills 实用使用手册102025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）