鸿蒙UI（ArkUI-方舟UI框架）- 使用文本

xianKOG2025-02-10 12:01

返回主章节 → 鸿蒙UI（ArkUI-方舟UI框架）

文本使用

文本显示 (Text/Span)

Text是文本组件，通常用于展示用户视图，如显示文章的文字内容。Span则用于呈现显示行内文本。

创建文本

string字符串
typescript 复制代码 
	Text("我是一段文本")
引用Resource资源
复制代码 
资源引用类型可以通过**$r**创建Resource类型对象，文件位置为/resources/base/element/string.json。
typescript 复制代码 
	Text($r('app.string.module_desc'))
	  .baselineOffset(0)
	  .fontSize(30)
	  .border({ width: 1 })
	  .padding(10)
	  .width(300)

添加子组件

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

创建Span
typescript 复制代码 
Text('我是Text') {
  Span('我是Span')
}
.padding(10)
.borderWidth(1)
设置文本装饰线及颜色

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

typescript 复制代码 
	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设置文字一直保持大写或者小写状态。
typescript 复制代码 
	Text() {
	  Span('I am Upper-span').fontSize(12)
	    .textCase(TextCase.UpperCase)
	}
	.borderWidth(1)
	.padding(10)
添加事件

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

typescript 复制代码 
	Text() {
	  Span('I am Upper-span').fontSize(12)
	    .textCase(TextCase.UpperCase)
	    .onClick(() => {
	      console.info('我是Span------onClick');
	    })
	}

自定义文本样式

通过textAlign属性 设置文本对齐样式。
typescript 复制代码 
	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一起使用（默认情况下文本自动折行）。
typescript 复制代码 
	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)
	Text('当文本溢出其尺寸时，文本将滚动显示。When the text overflows its dimensions, the text will scroll for displaying.')       
	  .width(250)
	  .textOverflow({ overflow: TextOverflow.MARQUEE })                 
	  .maxLines(1)       
	  .fontSize(12)
	  .border({ width: 1 })
	  .padding(10)
通过lineHeight属性 设置文本行高。
typescript 复制代码 
	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属性 设置文本装饰线样式及其颜色。
typescript 复制代码 
	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属性 设置文本基线的偏移量。
typescript 复制代码 
	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属性 设置文本字符间距。
typescript 复制代码 
	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 用于设置文本的最大显示字号 。这两个属性必须同时设置 才能生效，并且需要与maxLines属性或布局大小限制配合使用，单独设置任一属性将不会产生效果。

typescript 复制代码 
	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 属性设置文本大小写。
typescript 复制代码 
	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属性 设置文本是否可复制粘贴。
typescript 复制代码 
	Text("这是一段可复制文本")
	  .fontSize(30)
	  .copyOption(CopyOptions.InApp)

添加事件

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

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

场景示例

该示例通过maxLines、textOverflow、textAlign、constraintSize属性展示了热搜榜的效果。

typescript 复制代码 
// 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%')
  }
}

文本输入 (TextInput/TextArea)

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考TextInput、TextArea。

创建输入框

设置输入框类型

自定义样式

添加事件

场景示例

富文本（RichEditor）

RichEditor是支持图文混排和文本交互式编辑的组件，通常用于响应用户对图文混合内容的输入操作，例如可以输入图文的评论区。具体用法参考RichEditor。

图标小符号 (SymbolGlyph/SymbolSpan)

属性字符串（StyledString/MutableStyledString）

相关推荐
天天进步201514 小时前
UI-TARS 源码解析 #22：二次开发实战：用 UI-TARS 做一个简单的 Windows 自动操作 Agent
windows·ui
星空真迷人19 小时前
嵌入式鸿蒙并非精简版，核心究竟是什么？
stm32·单片机·嵌入式硬件·物联网·华为·harmonyos·iot
M-Robots echo1 天前
王成录：分布式软总线是 M-Robots 实现群体智能的技术内核
机器人·ros·鸿蒙·开源社区·m-robots
OH_TPC1 天前
【鸿蒙优选三方库】@ohos/ijkplayer：在鸿蒙上像 B 站一样流畅播视频
华为·音视频·harmonyos·鸿蒙
2501_919749031 天前
华为鸿蒙经期记录APP—小羊月经
华为·harmonyos·鸿蒙
黑鲨吃西瓜1 天前
鸿蒙通用模块
harmonyos·鸿蒙
腾科IT教育2 天前
HarmonyOS开发｜ArkTS UI颜色API通用规则
ui·华为·harmonyos·harmonyos开发·鸿蒙应用开发工程师
风华圆舞2 天前
HarmonyOS 自定义绘制实战 —— 用 ArkGraphics2D 画一个会卷曲翻动的页面网格
harmonyos·arkts·drawing·drawvertices·翻页卷曲·有限差分法线
风华圆舞2 天前
HarmonyOS 手势与 animator 实战 —— 捏出跟手又有弹性的翻页物理
harmonyos·手势·pixelmap·pangesture·边界回弹·native 句柄
北墨NoLimit2 天前
DevEco Code：在终端里用 AI 写鸿蒙应用
harmonyos
热门推荐
01VSCode+CodeX扩展，无法启动02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05如何新建文件夹？ 电脑新建文件夹的4种方法06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07历年考研数学一、数学二、数学三真题试卷及答案PDF08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路102026年8月4日科技热点深度解析：AI大模型群雄逐鹿、卫星互联网组网提速、半导体封装材料革命