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

news2024/11/19 6:32:49

文章目录

  • 前言
  • 一、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.coloradmin.cn/o/1124643.html

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

相关文章

功率放大器在PZT陶瓷薄膜压电传感器研究中的应用

功率放大器在PZT陶瓷薄膜压电传感器研究中的应用

随着科技的进步和工业发展的需求，对于压力测量和控制的需求日益增加。压力传感器作为一种关键的传感器器件，在机械、自动化、医疗、航空等多个领域都有广泛应用。PZT陶瓷薄膜压电传感器由于其响应速度快、精度高、稳定性好等优点，成为了许多应…
阅读更多...
OTA: Optimal Transport Assignment for Object Detection 论文和代码学习

OTA: Optimal Transport Assignment for Object Detection 论文和代码学习

OTA 原因步骤什么是最优传输策略标签分配的OT正标签分配负标签分配损失计算中心点距离保持稳定动态k的选取 整体流程代码使用 论文连接： 原因 1、全部按照一个策略如IOU来分配GT和Anchors不能得到全局最优，可能只能得到局部最优。 2、目前提出的ATSS和P…
阅读更多...
做数据可视化，谨记三大要点

做数据可视化，谨记三大要点

数据可视化报表就是“一图胜千言”的最佳例子。数据可视化，也就是将数据图形化、图表化，以良好的视觉效果呈现数据，达到发现、分析、预测、监控、决策等目的。要想做出一份优秀的数据可视化报表，那就要在做报表时谨记三大要点&…
阅读更多...
3D模型在线格式转换工具

3D模型在线格式转换工具

单模型上传格式 支持格式说明 支持RAR和ZIP压缩包上传，压缩包大小按原始文件大小计算，压缩包内只能包含一个模型文件 超过500MB的模型请联系客服 您也可以下载老子云客户端进行批量上传 不同会员级别的模型上传大小有不同的限制，详情请查询…
阅读更多...
越来越好用的Edge浏览器，盘点Edge浏览器功能丨插件

越来越好用的Edge浏览器，盘点Edge浏览器功能丨插件

前些年， Edge 浏览器也宣布加入 Chromium 内核；它的前身是IE浏览器， Edge之所以越来越多人用的一个原因是因为它的内核是Google Chrome的Chromium，而且不需要膜法就可以使用，这一点Chrome浏览器还不行，访问…
阅读更多...
分拣设备运动仿真

分拣设备运动仿真

这一次我们来分享一下如何在Solidworks 中做出传送台的分拣动作并通过分拣动作生成过程动画，以便于我们可以用于产品展示又或者验证运行程序无误的情况下结构是否会影响输送效率。 首先创建一个新的运动算例 将窗口切换至Motion分析 在设置之前我们先理清设置传送带…
阅读更多...
税务某局 webpack 登录接口逆向分析

税务某局 webpack 登录接口逆向分析

持续创作文章，只是为了更好的思考 这里不多介绍了，我放一张图大家就明白是什么接口了。这里只介绍整体加密逻辑，有些细的地方大家自行调整。 本次逆向的网址是 aHR0cHM6Ly90cGFzcy5qaWxpbi5jaGluYXRheC5nb3YuY246ODQ0My8jL2xvZ2luP3JlZGly…
阅读更多...
vue3实现详情页返回列表页，返回原来列表页滚动条所在的位置

vue3实现详情页返回列表页，返回原来列表页滚动条所在的位置

keepAlive缓存页面 组合式API 第一步第二步第三步第四步 第一步 首先在路由文件的meta里面定义 meta: {keepAlive: false, },第二步 在app.vue 根文件下定义代码 <template><keep-alive><router-view v-if"route.meta.keepAlive" /></keep-…
阅读更多...
基于springboot实现广场舞团平台系统项目【项目源码+论文说明】

基于springboot实现广场舞团平台系统项目【项目源码+论文说明】

基于springboot实现广场舞团管理平台系统 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&am…
阅读更多...
软设上午题错题知识点8

软设上午题错题知识点8

软设上午题错题知识点8 1、IPv4用32位二进制表示&#xff0c;能够表示的地址空间是232&#xff0c;IPv6用128位二进制表示&#xff0c;能够表示的地址空间是2128&#xff0c;本题选择2128 /232296 。 2、在应用散列函数构造哈希表&#xff08;或散列表&#xff09;时&#xf…
阅读更多...
使用docker部署flask接口服务 一

使用docker部署flask接口服务 一

文章目录 一&#xff1a;说明二&#xff1a;dockerfile 参数说明1. 一般常用的 参数&#xff0c;以及它的含义2. 我自己的 dockerfile 三&#xff1a;示例操作1. Gunicorn Gevent启动服务的好处2. 用Gunicorn Gevent的好处&#xff1a;3. Gunicorn Gevent的 使用示例4. 创建…
阅读更多...
“数字赋能、智创未来”第三届中国（宁波）软件峰会暨程序员节即将开启

“数字赋能、智创未来”第三届中国（宁波）软件峰会暨程序员节即将开启

在“八八战略”的指引下,我们深入实施数字经济创新提质“一号发展工程”,以打造“全球智造创新之都”为目标,强化数字赋能、绿色赋能、低碳赋能、融合赋能,全速推动数字经济和实体经济深度融合。第三届(宁波)软件峰会暨程序员节将于10月24日下午在宁波泛太平洋大酒店三楼大宴会…
阅读更多...
优优嗨聚集团：旅游经济繁荣，助力当地外卖市场崛起

优优嗨聚集团：旅游经济繁荣，助力当地外卖市场崛起

随着全球旅游经济的飞速发展&#xff0c;越来越多的人选择在假期或周末出游。而在旅游过程中&#xff0c;餐饮是一个不可或缺的环节。近年来&#xff0c;随着移动支付和互联网技术的普及&#xff0c;外卖行业逐渐崛起&#xff0c;为旅游经济注入了新的活力。 一、旅游经济带动外…
阅读更多...
口袋参谋：如何一键获取竞品数据？这招实用！

口袋参谋：如何一键获取竞品数据？这招实用！

​在淘宝天猫上开店&#xff0c;市场竞争日益激烈&#xff0c;想要做好店铺&#xff0c;我们就不得不去分析竞品的数据了。 很多卖家开店后&#xff0c;一上来就直接卡在类目前10&#xff0c;折腾了一两个月才发现自己对标错了对象&#xff0c;最终竹篮打水一场空。 所以&…
阅读更多...
Linux下 /etc/shadow内容详解

Linux下 /etc/shadow内容详解

/etc/shadow 文件&#xff0c;用于存储 Linux 系统中用户的密码信息&#xff0c;又称为“影子文件”。 前面介绍了 /etc/passwd 文件&#xff0c;由于该文件允许所有用户读取&#xff0c;易导致用户密码泄露&#xff0c;因此 Linux 系统将用户的密码信息从 /etc/passwd 文件中…
阅读更多...
以赛促教，以赛促研 ——计算机科学系举办“火焰杯”软件测试开发选拔赛颁奖仪式

以赛促教，以赛促研 ——计算机科学系举办“火焰杯”软件测试开发选拔赛颁奖仪式

颁奖仪式 2023年3月9日&#xff0c;第三届“火焰杯”软件测试开发选拔赛颁奖仪式在南海楼124会议室举行&#xff0c;计算机科学系系主任龙锦益教授、指导老师孙玉霞副教授、测吧科技有限公司王雪冬总监及获奖同学参加了颁奖仪式。 会议伊始&#xff0c;龙锦益教授对王雪冬总监…
阅读更多...
安防视频监控平台EasyCVR查询告警后，无法自动清除记录该如何优化？

安防视频监控平台EasyCVR查询告警后，无法自动清除记录该如何优化？

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能支…
阅读更多...
中国芯片制造厂商无惧封禁，订单一路飙升 | 百能云芯

中国芯片制造厂商无惧封禁，订单一路飙升 | 百能云芯

随着美国对中国半导体行业实施更严格的限制措施&#xff0c;中国的芯片制造厂商成为了不可忽视的受益者。根据外媒报道&#xff0c;中国顶尖的芯片代工厂为了加速自主科技发展&#xff0c;已经开始更多地依赖国内制造的设备&#xff0c;这导致了中国芯片制造厂商近几个月来接到…
阅读更多...
前端KOA搭建服务器——part1

前端KOA搭建服务器——part1

目录 koa简介前端项目搭建koa环境第一步&#xff1a;新建项目第二步&#xff1a;环境初始化&#xff0c;安装依赖初始化项目&#xff0c;生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步&#xff1a;代码调用…
阅读更多...
LeetCode讲解篇之面试题 10.11. 峰与谷

LeetCode讲解篇之面试题 10.11. 峰与谷

文章目录 题目描述题解思路题解代码 题目描述 题解思路 倒序遍历数组 若当前下标为偶数&#xff0c;则为峰&#xff0c;若左值大于当前值&#xff0c;则交换 若当前下标为奇数&#xff0c;则为谷&#xff0c;若左值小于当前值&#xff0c;则交换 题解代码 func wiggleSort…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023