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

news2025/4/24 9:12:13

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

文本使用

文本显示 (Text/Span)

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

创建文本

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)

在这里插入图片描述

添加子组件

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

创建Span
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');
	    })
	}

自定义文本样式

通过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)
	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属性设置文本行高。
	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用于设置文本的最大显示字号。这两个属性必须同时设置才能生效，并且需要与maxLines属性或布局大小限制配合使用，单独设置任一属性将不会产生效果。

	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)

在这里插入图片描述

添加事件

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

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

场景示例

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

// 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）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2296092.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spider 数据集上实现nlp2sql训练任务

Spider 数据集上实现nlp2sql训练任务

NLP2SQL（自然语言处理到 SQL 查询的转换）是一个重要的自然语言处理（NLP）任务，其目标是将用户的自然语言问题转换为相应的 SQL 查询。这一任务在许多场景下具有广泛的应用，尤其是在与数据库交互的场景中&…
阅读更多...
【DeepSeek】DeepSeek概述 | 本地部署deepseek

【DeepSeek】DeepSeek概述 | 本地部署deepseek

目录 1 -> 概述 1.1 -> 技术特点 1.2 -> 模型发布 1.3 -> 应用领域 1.4 -> 优势与影响 2 -> 本地部署 2.1 -> 安装ollama 2.2 -> 部署deepseek-r1模型 1 -> 概述 DeepSeek是由中国的深度求索公司开发的一系列人工智能模型，以其…
阅读更多...
ASP.NET Core 使用 WebClient 从 URL 下载

ASP.NET Core 使用 WebClient 从 URL 下载

本文使用 ASP .NET Core 3.1，但它在.NET 5、 .NET 6和.NET 8上也同样适用。如果使用较旧的.NET Framework，请参阅本文，不过，变化不大。 如果想要从 URL 下载任何数据类型，请参阅本文：HttpClient 使用WebC…
阅读更多...
【CubeMX-HAL库】STM32F407—无刷电机学习笔记

【CubeMX-HAL库】STM32F407—无刷电机学习笔记

目录 简介： 学习资料： 跳转目录： 一、工程创建 二、板载LED 三、用户按键 四、蜂鸣器 1.完整IO控制代码 五、TFT彩屏驱动 六、ADC多通道 1.通道确认 2.CubeMX配置 ①开启对应的ADC通道 ②选择规则组通道 ③开启DMA ④开启ADC…
阅读更多...
vue3 点击图标从相册选择二维码图片，并使用jsqr解析二维码（含crypto-js加密解密过程）

vue3 点击图标从相册选择二维码图片，并使用jsqr解析二维码（含crypto-js加密解密过程）

vue3 点击图标从相册选择二维码图片，并使用jsqr解析二维码（含crypto-js加密解密过程） 1.安装 jsqr 和 crypto-js npm install -d jsqr npm install crypto-js2.在util目录下新建encryptionHelper.js文件，写加密解密方法。 // e…
阅读更多...
kafka 3.5.0 raft协议安装

kafka 3.5.0 raft协议安装

前言 最近做项目，需要使用kafka进行通信，且只能使用kafka，笔者没有测试集群，就自己搭建了kafka集群，实际上笔者在很早之前就搭建了，因为当时还是zookeeper（简称ZK）注册元数据&#…
阅读更多...
前后端服务配置

前后端服务配置

1、安装虚拟机（VirtualBox或者vmware），在虚拟机上配置centos(选择你需要的Linux版本)，配置如nginx服务器等 1.1 VMware 下载路径Sign In注册下载 1.2 VirtualBox 下载路径https://www.virtualbox.org/wiki/Downloads 2、配置服…
阅读更多...
在阿里云ECS上一键部署DeepSeek-R1

在阿里云ECS上一键部署DeepSeek-R1

DeepSeek-R1 是一款开源模型，也提供了 API(接口)调用方式。据 DeepSeek介绍，DeepSeek-R1 后训练阶段大规模使用了强化学习技术，在只有极少标注数据的情况下提升了模型推理能力，该模型性能对标 OpenAl o1 正式版。DeepSeek-R1 推出…
阅读更多...
git SourceTree 使用

git SourceTree 使用

Source Tree 使用原理 文件的状态 创建仓库和提交 验证 再克隆的时候发发现一个问题，就是有一个 这个验证，起始很简单 就是 gitee 的账号和密码，但是要搞清楚的是账号不是名称，我之前一直再使用名称登录老是出问题 这个很简单的…
阅读更多...
游戏引擎学习第94天

游戏引擎学习第94天

仓库:https://gitee.com/mrxiao_com/2d_game_2 回顾上周的渲染器工作 完成一款游戏的开发，完全不依赖任何库和引擎，这样我们能够全面掌握游戏的开发过程，确保没有任何细节被隐藏。我们将深入探索每一个环节，犹如拿着手电筒翻看床…
阅读更多...
win32汇编环境,结构体的使用示例二

win32汇编环境,结构体的使用示例二

;运行效果 ;win32汇编环境,结构体的使用示例二 ;举例说明结构体的定义，如何访问其中的成员，使用assume指令指向某个结构体，计算结构数组所需的偏移量得到某个成员值等 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>…
阅读更多...
DeepSeek从入门到精通教程PDF清华大学出版

DeepSeek从入门到精通教程PDF清华大学出版

DeepSeek爆火以来，各种应用方式层出不穷，对于很多人来说，还是特别模糊，有种雾里看花水中望月的感觉。 最近，清华大学新闻与传播学院新媒体研究中心，推出了一篇DeepSeek的使用教程，从最基础的是…
阅读更多...
【PDF提取内容】如何批量提取PDF里面的文字内容，把内容到处表格或者批量给PDF文件改名，基于C++的实现方案和步骤

【PDF提取内容】如何批量提取PDF里面的文字内容，把内容到处表格或者批量给PDF文件改名，基于C++的实现方案和步骤

以下分别介绍基于 C 批量提取 PDF 里文字内容并导出到表格，以及批量给 PDF 文件改名的实现方案、步骤和应用场景。 批量提取 PDF 文字内容并导出到表格 应用场景 文档数据整理：在处理大量学术论文、报告等 PDF 文档时，需要提取其中的关键信…
阅读更多...
SSA-TCN麻雀算法优化时间卷积神经网络时间序列预测未来Matlab实现

SSA-TCN麻雀算法优化时间卷积神经网络时间序列预测未来Matlab实现

SSA-TCN麻雀算法优化时间卷积神经网络时间序列预测未来Matlab实现 目录 SSA-TCN麻雀算法优化时间卷积神经网络时间序列预测未来Matlab实现预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现SSA-TCN麻雀算法优化时间卷积神经网络时间序列预测未来（优…
阅读更多...
大模型推理——MLA实现方案

大模型推理——MLA实现方案

1.整体流程 先上一张图来整体理解下MLA的计算过程 2.实现代码 import math import torch import torch.nn as nn# rms归一化 class RMSNorm(nn.Module):""""""def __init__(self, hidden_size, eps1e-6):super().__init__()self.weight nn.Pa…
阅读更多...
大数据项目2：基于hadoop的电影推荐和分析系统设计和实现

大数据项目2：基于hadoop的电影推荐和分析系统设计和实现

前言 大数据项目源码资料说明： 大数据项目资料来自我多年工作中的开发积累与沉淀。 我分享的每个项目都有完整代码、数据、文档、效果图、部署文档及讲解视频。 可用于毕设、课设、学习、工作或者二次开发等，极大提升效率！ 1、项目目标 本…
阅读更多...
Windows逆向工程入门之汇编环境搭建

Windows逆向工程入门之汇编环境搭建

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 Visual Studio逆向工程配置 基础环境搭建 Visual Studio 官方下载地址安装配置选项(后期可随时通过VS调整) 使用C的桌面开发 拓展可选选项 MASM汇编框架 配置MASM汇编项目 创建新项目 选择空…
阅读更多...
gc buffer busy acquire导致的重大数据库性能故障

gc buffer busy acquire导致的重大数据库性能故障

📢📢📢📣📣📣 作者：IT邦德 中国DBA联盟(ACDU)成员，10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯…
阅读更多...
Formily 如何进行表单验证

Formily 如何进行表单验证

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
安宝特方案 | AR眼镜：远程医疗的“时空折叠者”，如何为生命争夺每一分钟？

安宝特方案 | AR眼镜：远程医疗的“时空折叠者”，如何为生命争夺每一分钟？

行业痛点：当“千里求医”遇上“资源鸿沟” 20世纪50年代，远程会诊的诞生曾让医疗界为之一振——患者不必跨越山河，专家无需舟车劳顿，一根电话线、一张传真纸便能架起问诊的桥梁。然而，传统远程医疗的局限也日益凸显&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023