【鸿蒙软件开发】文本显示（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.hqwc.cn/news/145607.html

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

相关文章

STM32入门F4

STM32入门F4

学习资料：杨桃电子，官网：洋桃电子 | 杜洋工作室 www.doyoung.net 1.为什么要学F407 STM32F103系列与STM32F407系列对照表： 2.F4系列命名与封装 STM32全系列分类图： STM32F4系列：STM32F4 MCU高级系列具有从…
阅读更多...
032-第三代软件开发-Popup弹窗

032-第三代软件开发-Popup弹窗

第三代软件开发-Popup弹窗 文章目录 第三代软件开发-Popup弹窗项目介绍Popup弹窗官方示例项目中的代码 之前写过一个Popup抄抄别人的dimvisible 和 Open 区别 与 Dialog有啥区别其他总结一下 关键字： Qt、 Qml、 Popup、 弹窗、 modal 项目介绍 欢迎来到我们的…
阅读更多...
从一个webpack loader中学习

从一个webpack loader中学习

chalk：给终端输出加一些自定义的样式 loader-utils：webpack的loader配置中会通过options传入一些用户自定义参数，就可以通过该包提供的getoptions()获取 node-fetch：Node.js的模块，用于从远程服务器获取数据 关于bab…
阅读更多...
【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

🔥 🔥🔥 github: https://github.com/declare-lab/tango 效果：https://tango-web.github.io/ 论文地址：https://arxiv.org/pdf/2304.13731.pdf 数据集audiocaps下载： https://blog.csdn.net/weixin_4350969…
阅读更多...
朋友圈推广如何做？

朋友圈推广如何做？

为什么在朋友圈做推广是如此重要，以及如何充分利用这个平台来推动你的业务增长。 不仅仅是分享生活点滴，朋友圈也可以成为你的事业起飞的跳板。快来了解一下吧！ 为什么在朋友圈做推广？ 1、人脉力量：朋友圈是一个连接…
阅读更多...
谷歌云的利润增长才刚刚开始

谷歌云的利润增长才刚刚开始

来源：猛兽财经 作者：猛兽财经 总结： （1）自从Google Cloud(谷歌云）今年开始盈利以来，投资者都在怀疑这种盈利能力能否持续下去。 （2）虽然微软Azure目前在全球的人工智能竞…
阅读更多...
我试图扯掉这条 SQL 的底裤。只能扯一点点，不能扯多了

我试图扯掉这条 SQL 的底裤。只能扯一点点，不能扯多了

之前不是写分页嘛，分页肯定就要说到 limit 关键字嘛。 然后我啪的一下扔了一个链接出来： https://dev.mysql.com/doc/refman/8.0/en/limit-optimization.html 这个链接就是 MySQL 官方文档，这一章节叫做“对 Limit 查询的优化”，针对 limit 和 order by 组合的场景进行了较…
阅读更多...
XPS测试基本理论-科学指南针

XPS测试基本理论-科学指南针

1、XPS是什么鬼? 通过收集在入射X光作用下，从材料表面激发的电子能量、角度、强度等信息对材料表面进行定性、定量和结构鉴定的表面分析方法。 一般以Al、Mg作为X射线的激发源，俗称靶材。 2、XPS测试深度是多少? 由于电子穿过材料需要消耗能量&…
阅读更多...
算法刷题-链表

算法刷题-链表

算法刷题-链表 203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val ，请你删除链表中所有满足 Node.val val 的节点，并返回 新的头节点 。 示例 1： 输入：head [1,2,6,3,4,5,6], val 6 输出：[1,2,3,4,5]…
阅读更多...
vue3如何实现页面跳转？

vue3如何实现页面跳转？

首先、给元素绑点击事件 其次 写跳转路由 总结：一定不要忘了引入Router
阅读更多...
【JVM系列】- 探索·运行时数据区的私有结构

【JVM系列】- 探索·运行时数据区的私有结构

探索运行时数据区的私有结构 文章目录 探索运行时数据区的私有结构运行时数据区的结构与概念认识线程了解守护线程和普通线程JVM系统线程 程序计数器（PC寄存器）概述PC寄存器的特点PC寄存器的作用 透过案例了解寄存器为什么需要用PC寄存器来存放字节码的指…
阅读更多...
分治法，动态规划法，贪心法，回溯法主要概括

分治法，动态规划法，贪心法，回溯法主要概括

目录 分治法，动态规划法，贪心法，回溯法主要概括 1.前言2.分治法2.1基本思想：2.2适用条件：2.3时间复杂度：2.4主要解决：2.5关键字：2.6其他： 3.动态规划法3.1基本思想&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023