HarmonyOS鸿蒙学习基础篇 - Text文本组件

news2025/4/6 17:58:05

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。     

    Text文本组件是可以显示一段文本的组件。该组件从API Version 7开始支持,从API version 9开始,该接口支持在ArkTS卡片中使用。

子组件

     可以包含Span子组件

用法

Text(content?: string | Resource)

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数解释如下:

参数名

参数类型

必填

参数描述

content

string | Resource

文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。

默认值:' '

属性

Text组件支持除支持通用属性外,还支持以下属性:

名称

参数类型

描述

textAlign

TextAlign

设置文本段落在水平方向的对齐方式

默认值:TextAlign.Start

说明:

文本段落宽度占满Text组件宽度。

可通过align属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同,控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同,控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同,控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。

从API version 9开始,该接口支持在ArkTS卡片中使用。

textOverflow

{overflow: TextOverflow}

设置文本超长时的显示方式。

默认值:{overflow: TextOverflow.Clip}

说明:

文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。

需配合maxLines使用,单独设置不生效。

从API version 9开始,该接口支持在ArkTS卡片中使用。

maxLines

number

设置文本的最大行数。

说明:

默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 textOverflow来指定截断方式。

从API version 9开始,该接口支持在ArkTS卡片中使用。

lineHeight

string | number | Resource

设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。

从API version 9开始,该接口支持在ArkTS卡片中使用。

decoration

{

type: TextDecorationType,

color?: ResourceColor

}

设置文本装饰线样式及其颜色。

默认值:{

type: TextDecorationType.None,

color:Color.Black

}

从API version 9开始,该接口支持在ArkTS卡片中使用。

baselineOffset

number | string

设置文本基线的偏移量,默认值0。

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

设置该值为百分比时,按默认值显示。

letterSpacing

number | string

设置文本字符间距。

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

设置该值为百分比时,按默认值显示。

minFontSize

number | string | Resource

设置文本最小显示字号。

需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效。

从API version 9开始,该接口支持在ArkTS卡片中使用。

maxFontSize

number | string | Resource

设置文本最大显示字号。

需配合minFontSize以及maxline或布局大小限制使用,单独设置不生效。

从API version 9开始,该接口支持在ArkTS卡片中使用。

textCase

TextCase

设置文本大小写。

默认值:TextCase.Normal

从API version 9开始,该接口支持在ArkTS卡片中使用。

copyOption9+

CopyOptions

组件支持设置文本是否可复制粘贴。

默认值:CopyOptions.None

该接口支持在ArkTS卡片中使用。

说明:

设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice,长按文本,会弹出文本选择菜单,可选中文本并进行复制、全选操作。

 不支持Text内同时存在文本内容和Span子组件。如果同时存在,只显示Span内的内容。

事件

支持通用事件(见下期文章或鸿蒙官网)。

示例

   以下代码定义了一个名为 TextExample1 的组件,用于展示不同文本样式的效果,包括文本对齐、文本溢出处理和行高设置。

@Entry  // 使用 @Entry 装饰器标识这是一个入口组件。
@Component  // 使用 @Component 装饰器定义一个新组件。
struct TextExample1 {  // 定义名为 TextExample1 的结构体,代表这个组件。

  build() {  // 定义 build 方法来构建UI。
    Flex({  // 创建一个弹性布局容器。
      direction: FlexDirection.Column,  // 设置布局方向为垂直列。
      alignItems: ItemAlign.Start,  // 设置子项沿主轴的起始位置对齐。
      justifyContent: FlexAlign.SpaceBetween  // 设置子项间距均匀分布。
    }) {
      // 文本水平方向对齐方式设置
      // 单行文本
      Text('textAlign').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件,说明接下来的文本对齐设置。

      Text('TextAlign set to Center.')  // 创建一个文本组件,文本居中对齐。
        .textAlign(TextAlign.Center)  // 设置文本对齐方式为居中。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      Text('TextAlign set to Start.')  // 创建一个文本组件,文本起始对齐。
        .textAlign(TextAlign.Start)  // 设置文本对齐方式为起始对齐。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      Text('TextAlign set to End.')  // 创建一个文本组件,文本结束对齐。
        .textAlign(TextAlign.End)  // 设置文本对齐方式为结束对齐。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      // 多行文本
      Text('This is the text content with textAlign set to Center.')  // 创建一个多行文本组件,文本居中对齐。
        .textAlign(TextAlign.Center)  // 设置文本对齐方式为居中。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      Text('This is the text content with textAlign set to Start.')  // 创建一个多行文本组件,文本起始对齐。
        .textAlign(TextAlign.Start)  // 设置文本对齐方式为起始对齐。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      Text('This is the text content with textAlign set to End.')  // 创建一个多行文本组件,文本结束对齐。
        .textAlign(TextAlign.End)  // 设置文本对齐方式为结束对齐。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .width('100%')  // 设置宽度为100%。

      // 文本超长时显示方式
      Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件,说明接下来的文本溢出设置。

      // 超出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.')
        .textOverflow({ overflow: TextOverflow.Clip })  // 设置文本溢出方式为剪裁(Clip)。
        .maxLines(1)  // 设置最大行数为1。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。

      // 超出maxLines展示省略号
      Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
        .join('\u200B'))
        .textOverflow({ overflow: TextOverflow.Ellipsis })  // 设置文本溢出方式为省略号(Ellipsis)。
        .maxLines(1)  // 设置最大行数为1。
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。

      Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件,说明接下来的行高设置。

      // 设置文本的行高
      Text('This is the text with the line height set. This is the text with the line height set.')
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
      Text('This is the text with the line height set. This is the text with the line height set.')
        .fontSize(12)  // 设置字体大小为12。
        .border({ width: 1 })  // 设置边框宽度为1。
        .padding(10)  // 设置内边距为10。
        .lineHeight(20)  // 设置行高为20。
    }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })  // 设置容器的高度、宽度和内边距。
  }
}

以上代码预览如下:

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

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

相关文章

【时间序列篇】基于LSTM的序列分类-Pytorch实现 part2 自有数据集构建

系列文章目录 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part1 案例复现 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part2 自有数据集构建 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part3 化为己用 在一个人体姿态估计的任务中,需要用深度学习模型…

上门服务小程序|预约上门服务系统开发有哪些功能?

在现代快节奏的生活中,压力和疲劳常常困扰着我们。为了缓解这种状况,越来越多的人选择去按摩店进行放松。然而,繁忙的工作和家庭责任往往让我们无法抽出时间去按摩店。在这种情况下,上门按摩服务应运而生。而随着科技的发展&#…

VI / VIM的使用

vi/vim 的区别简单点来说,它们都是多模式编辑器,不同的是 vim 是 vi 的升级版本,它不仅兼容 vi 的所有指令,而且 还有一些新的特性在里面。例如语法加亮,可视化操作不仅可以在终端运行,也可以运行于 x win…

SpringMVC第二天

今日内容 能够掌握SSM整合的流程 能够编写SSM整合功能模块类 能够使用Result统一表现层响应结果 能够编写异常处理器进行项目异常 能够完成SSM整合前端页面发送请求实现增删改查操作 能够编写拦截器并配置拦截器 一、SSM整合【重点】 1 SSM整合配置 问题导入 请描述“SSM整…

IntelliJ IDE 插件开发 | (五)VFS 与编辑器

系列文章 IntelliJ IDE 插件开发 |(一)快速入门IntelliJ IDE 插件开发 |(二)UI 界面与数据持久化IntelliJ IDE 插件开发 |(三)消息通知与事件监听IntelliJ IDE 插件开发 |(四)来查收…

Windows AD 组策略 通过脚本修改管理员密码:以安全方式

因为本文主要讲的是通过脚本如何以安全方式设置密码,所以关于组策略如何设置请参考这里: WinServer 2019 AD 组策略 启用本地管理员账号,重置密码_ad域命令启用administrator账户-CSDN博客 我们首先要讲一下,以一般方法创建的脚…

力扣1027. 最长等差数列

动态规划 思路: 可以参考力扣1218. 最长定差子序列目前不清楚公差,可以将序列最大最小值找到,公差的范围是 [-(max - min), (max - min)],按公差递增迭代遍历求出最长等差数列; class Solution { public:int longest…

写一份简单的产品说明书:格式和排版建议

现在的市场竞争那么激烈,拥有一份简洁明了的产品说明书可以说是很重要的。产品说明书不仅向用户提供了对产品的详细了解,还能够树立品牌形象,提升用户体验。 | 一、写一份简单的产品说明书—一些建议 1.创意封面设计 一个吸引人的封面设计能…

浅析混沌工程的主要概念和作用

混沌工程是一种系统设计和测试方法,旨在通过有目的地在生产环境中引入故障来发现和解决系统中的潜在问题。通过模拟故障和持续测试,有助于发现和解决系统中的潜在问题,提高系统的可靠性、弹性和安全性。 故障引入: 混沌工程通过故…

for循环延时时间计算

​ 文章目录 前言一、计算方式二、for循环 2.1 for循环里定义变量2.2 codeblock设置C99标准 三、四、总结 前言 之前做led点亮的实验,好像是被delay函数影响了,因为delay参数设置的不对,led没有正常闪烁。现在就想搞明白一些。 一、计算…

Windows11 Copilot助手开启教程(免费GPT-4)

Windows11上开启Copilot助手教程踩坑指南 Copilot介绍Copilot开启步骤1、更新系统2、更改语言和区域3、下载 ViVeTool 工具4、开启Copilot 使用 Copilot介绍 Windows Copilot 是 Windows 11 中的一个新功能,它可以让你与一个智能助理进行对话,获取信息&…

Win11在某些时候想要关闭windows安全中心应该怎么做,安装navicat事例

比如在安装navicat时,需要注册,注册机被删,就是windows安全中心干的,所以要想办法,不让他把注册机删掉,那么这里有一个比较巧妙的办法,就使用排除项,关闭 实时保护, 添…

app逆向-frida安装调试

文章目录 一、前言二、安装三、hook调试,hook java类 一、前言 frida是一款基于python javascript 的hook框架,可运行在android ios linux winosx等各平台,主要使用动态二进制插桩技术 官方网站:https://frida.re/docs/home/ a…

【深度学习】初识深度学习

初识深度学习 什么是深度学习 关系: #mermaid-svg-7QyNQ1BBaD6vmMVi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7QyNQ1BBaD6vmMVi .error-icon{fill:#552222;}#mermaid-svg-7QyNQ1BBaD6vmMVi .err…

探索Gin框架:快速构建高性能的Golang Web应用

前言 Gin框架是一个轻量级的Web框架,基于Go语言开发,旨在提供高性能和简洁的API。它具有快速的路由和中间件支持,使得构建Web应用变得更加简单和高效。无论是构建小型的API服务还是大型的Web应用,Gin框架都能够满足你的需求。 无论…

开源免费无广告Gopeed,现代化的高速下载器,支持(HTTP、BitTorrent、Magnet)等多种协议下载,开源免费、无广告、高度可定制、不限速。

目录 特点 支持的平台 一键部署 体验 特点 全平台支持、开源免费,不限速、无广告 遵循 GPL-3.0 开源协议 支持(HTTP、BitTorrent、Magnet)协议下载 高速下载,底层使用golang协程并发下载 每日自动更新 tracker 列表 去中心…

element-ui 树形控件 通过点击某个节点,遍历获取上级的所有父节点和本身节点

1、需求&#xff1a;点击树形控件的某个节点&#xff0c;需要拿到它上级的所有父节点进行操作 2、代码&#xff1a; 树形控件代码 <el-tree:data"deptOptions"node-click"getVisitCheckedNodes"ref"target_tree_Speech"node-key"id&qu…

Jenkins上跑自动化项目,case出现错误时,导致项目运行时间过长,该如何处理?

1、方案一&#xff1a;Jenkins上调整 进入配置&#xff1a; 构建环境&#xff1a; 自行选择超时时间即可&#xff5e; 2、方案二&#xff1a;代码调整【python】 安装插件&#xff1a;pytest-timeout 选择一&#xff1a;装饰器用法&#xff1a;将单个测试用例标记为超时&…

IDEA自带数据库导入SQL文件

右键数据库 - > 点击SQL Scripts -> run SQL Scripts 就可以选择对应的文件了

Zookeeper架构系列——集群模式

背景 架构图 集群模式详解 客户端连接到单个ZooKeeper服务器。客户端维护一个TCP连接&#xff0c;通过该连接发送请求、获取响应、获取监视事件和发送检测信号。如果与服务器的TCP连接中断&#xff0c;客户端将连接到其他服务器。 订购了ZooKeeper。ZooKeeper在每次更新时都…