【鸿蒙软件开发】文本显示（Text/Span）

文章目录

  • 前言
  • 一、Text控件
    • 1.1 创建文本
      • string字符串
      • 引用Resource资源
    • 1.2 添加子组件
      • 创建Span
      • 文本装饰线和样式
        • 文本装饰线
        • 设置文字一直保持大写/小写
        • 添加事件。
    • 1.3 自定义文本样式
      • 文本对齐
      • 长文本处理
      • 设置行高
      • 通过decoration属性设置文本装饰线样式及其颜色。
      • 通过baselineOffset属性设置文本基线的偏移量。
      • 通过letterSpacing属性设置文本字符间距。
      • minFontSize、maxFontSize设置
      • 通过textCase属性设置文本大小写。
      • 通过copyOption属性设置文本是否可复制粘贴。
    • 1.4 添加事件
  • 二、示例代码
  • 总结

前言

Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。

一、Text控件

1.1 创建文本

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)

在这里插入图片描述

其中fontSize为字体大小
baselineOffset为基线偏移（关于基线请自行查阅资料）
padding内间距

在这里插入图片描述

1.2 添加子组件

添加子组件
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)

在这里插入图片描述

TextDecorationType.LineThrough从中间穿过
TextDecorationType.Underline下划线
TextDecorationType.Overline在文本上面的线

在这里插入图片描述

设置文字一直保持大写/小写

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

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

在这里插入图片描述

TextCase.UpperCase为大写
TextCase.LowerCase为小写

在这里插入图片描述

添加事件。

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

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

在这里插入图片描述

1.3 自定义文本样式

文本对齐

通过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)

在这里插入图片描述

textAlign属性设置即可

在这里插入图片描述

长文本处理

通过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)

在这里插入图片描述

在这里插入图片描述

TextOverflow.None为直接截断，即超出部分不显示
TextOverflow.Ellipsis为超出部分用…代替

设置行高

通过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)

在这里插入图片描述

使用lineHeight属性即可设置
行高即使两行文本间的间距

在这里插入图片描述

通过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)

在这里插入图片描述

和前面的Span设置装饰线一样，这里不多赘述
在这里插入图片描述

通过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)

在这里插入图片描述

baselineOffset使用这个属性设置即可

在这里插入图片描述

通过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)

在这里插入图片描述

在这里插入图片描述

letterSpacing使用这个属性设置即可

minFontSize、maxFontSize设置

通过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)

在这里插入图片描述

在这里插入图片描述

1.4 添加事件

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

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

在这里插入图片描述

二、示例代码

// 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%')}
}

在这里插入图片描述

总结

以上就是今天要讲的内容，本文介绍了Text和Span的使用，Text和Span的关系，本文章包括了鸿蒙开发文档中所有的内容：文本显示Text/Span

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Excel·VBA制作工资条

Excel·VBA制作工资条

看到一篇博客《excel表头_Excel工资表怎么做？3分钟学会利用函数生成工资表》，使用排序功能、函数制作工资条。但如果需要经常制作工资条，显然使用VBA更加方便 VBA制作工资条 Sub 制作工资条()Dim title_row&, blank_row&, ws_new$,…
阅读更多...
在 Python 中使用 Pillow 进行图像处理【3/4】

在 Python 中使用 Pillow 进行图像处理【3/4】

第三部分 一、腐蚀和膨胀 您可以查看名为 的图像文件dot_and_hole.jpg，您可以从本教程链接的存储库中下载该文件： 该二值图像的左侧显示黑色背景上的白点，而右侧显示纯白色部分中的黑洞。 侵蚀是从图像边界去除白色像素的过程。您可以通过使用…
阅读更多...
【CANoe】文件处理_hex文件读取解析

【CANoe】文件处理_hex文件读取解析

hex文件里面只有00，01，04三种码。那么我们在解析的时候只需要对这三种不同状态的进行不同的解析即可。 hex文件格式的解析，可阅读：HEX文件格式详解 首先创建一个Block的结构体，根据经验我们知道，一个数据…
阅读更多...
如何使用vim粘贴鼠标复制的内容

如何使用vim粘贴鼠标复制的内容

文章目录 一、使用步骤1.找到要编辑的配置文件2.找到目标文件3.再回到vim编辑器 一、使用步骤 1.找到要编辑的配置文件 用sudo vim /etc/apt/sources.list编辑软件源配置文件 sudo vim /etc/apt/sources.listvim 在默认的情况下当鼠标选中的时候进入的 Visual 模式&#xff…
阅读更多...
开源WAF--Safeline(雷池)测试手册

开源WAF--Safeline(雷池)测试手册

长亭科技—雷池(SafeLine)社区版 官方网站:长亭雷池 WAF 社区版 (chaitin.cn) WAF 工作在应用层，对基于 HTTP/HTTPS 协议的 Web 系统有着更好的防护效果，使其免于受到黑客的攻击 1.1 雷池的搭建 1.1.1 配置需求 操作系统：Linux 指令架构&am…
阅读更多...
【数据分享】2023年我国科技型中小企业数据（免费获取/Excel格式/Shp格式）

【数据分享】2023年我国科技型中小企业数据（免费获取/Excel格式/Shp格式）

企业是经济活动的参与主体，一个城市的企业数量决定了这个城市的经济发展水平！之前我们分享过2023年高新技术企业数据（可查看之前的文章获悉详情），我国专精特新“小巨人”企业数据（可查看之前的文章获悉详情…
阅读更多...
基于SpringBoot的学生班级考勤管理系统

基于SpringBoot的学生班级考勤管理系统

基于SpringBootVue的学生班级考勤管理系统的设计与实现~ 开发语言：Java数据库：MySQL技术：SpringBootMyBatisVue工具：IDEA/Ecilpse、Navicat、Maven 系统展示 管理员界面 课程管理 班级管理 学生管理 学生界面 考勤管理 摘要 学生…
阅读更多...
zzy-project-cli,提供多个框架的脚手架

zzy-project-cli,提供多个框架的脚手架

npm地址 install npm install zzy-project-cli -g做什么？ 将多个可选的框架提供给使用者选择，选中后自动下载对应模板，快捷使用。 使用 step1 zzy-cli create [项目名称]step2 获取模板之后选取任一进行下载 下载完成之后即可使用 模…
阅读更多...
2023/10/23学习记录

2023/10/23学习记录

1.VS2019中sln对应解决方案 修改sln的文件名，对应的解决方案名称也会变化。 2.如何修改生成的exe文件名呢？ 属性--->杂项--->（名称) 3.这是任务管理器，这里红色部分显示的是“这是文件描述”。 当通过属性查看详细信息的时…
阅读更多...
二叉树题目：最大二叉树

二叉树题目：最大二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题：最大二叉树 出处：654. 最大二叉树 难度 5 级 题目描述 要求 给定一个没有重复元素的整数数组 num…
阅读更多...
快速拿下 AI Prompt 工程师证书攻略！

快速拿下 AI Prompt 工程师证书攻略！

Datawhale干货 贡献者：许文豪、司玉鑫、甘元琦 Prompt 是 AI 2.0 时代打开大模型能力的金钥匙，它能够大大的提高工作效率。 如果把大语言模型 (LLM，Large Language Model) 具象成一个的员工，那 Prompt 提示词则好比是你给员工下的…
阅读更多...
numpy矩阵画框框

numpy矩阵画框框

在n>5(n是奇数)的nn数组中，用*画外方框和内接菱形。 (本笔记适合熟悉numpy的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网：https://www.python.org/ Free：大咖免费“圣经”教程《 python 完全自学教程》，不仅仅是基础那…
阅读更多...
数据结构——哈希

数据结构——哈希

目录 1.什么是哈希？ 2.哈希冲突 3.哈希冲突解决方法 ①闭散列 1.原理说明 2.代码实现 3.优缺点分析 4.二次探测 ②开散列 1.原理说明 2.代码实现 ③闭散列与开散列的比较 4.哈希的应用 ①位图 ②布隆过滤器 1.布隆过滤器概念 2.布隆过滤器的模拟实…
阅读更多...
Qt第六十六章：展示数据的标签

Qt第六十六章：展示数据的标签

目录 一、效果图 二、qtDesigner ①拖出一个frame作为组容器并贴上背景样式 ②拖出主要的三个控件：frame、line、frame、label*2 ③固定大小并设置字体、布局一下 ④拷贝三份并水平布局一下 ⑤设置样式 ⑥调整布局 三、ui文件 四、代码 一、效果图 二、qtD…
阅读更多...
Maven3.9.2 bug IDEA指定配置文件不生效

Maven3.9.2 bug IDEA指定配置文件不生效

Maven3.9.2 bug IDEA指定配置文件不生效 描述 运行新项目需要配置指定的settings.xml文件，一直报错找不到依赖，查看maven日志是从maven中心仓库找的依赖，自然找不到。 解决过程 清理idea缓存，仍然报错 删除/${username}/.m2/…
阅读更多...
AI智慧安防智能监控平台EasyCVR隔天设备录像播放失败是什么原因？该如何解决？

AI智慧安防智能监控平台EasyCVR隔天设备录像播放失败是什么原因？该如何解决？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台部署轻快，可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等，以及支持厂家私有协议与SDK接入，包括海康Ehome、海大宇等设备的SDK等，能对外分发RTMP、RTSP、HTTP-FLV、…
阅读更多...
使用docker部署flask接口服务 一

使用docker部署flask接口服务 一

文章目录 一：说明二：dockerfile 参数说明1. 一般常用的 参数，以及它的含义2. 我自己的 dockerfile 三：示例操作1. Gunicorn Gevent启动服务的好处2. 用Gunicorn Gevent的好处：3. Gunicorn Gevent的 使用示例4. 创建…
阅读更多...
【Django 03】QuerySet 和 Instance应用

【Django 03】QuerySet 和 Instance应用

1. DRF QuerySet 和 Instance功能概述 1.1 QuerySet 从数据库中查询结果存放的集合称为 QuerySet。 Django ORM用到三个类：Manager、QuerySet、Model。每个Model都有一个默认的 manager实例，名为objects。Django的ORM通过Mode的objects属性提供各种数据…
阅读更多...
Linux系统编程05

Linux系统编程05

在代码中启动多个进程 使用system库函数启动多个进程 传统的进程调用就是我们在命令框里输入运行某个进程，而我们可以依靠代码，实现让一个进程取启动另一个进程 在进程运行过程我们使用命令ps -elf看到正在运行的有三个进程 system的调用过程 首先./…
阅读更多...
基于springboot基于会员制医疗预约服务管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot基于会员制医疗预约服务管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot基于会员制医疗预约服务管理系统演示 摘要 会员制医疗预约服务管理信息系统是针对会员制医疗预约服务管理方面必不可少的一个部分。在会员制医疗预约服务管理的整个过程中，会员制医疗预约服务管理系统担负着最重要的角色。为满足如今日益复杂的管理需…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023