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

已于 2024-06-18 18:45:03 修改
阅读量2.6k 收藏 5
点赞数 12
分类专栏： 鸿蒙软件开发 文章标签： android harmonyos 鸿蒙 鸿蒙系统 ArkTS
于 2023-10-23 18:19:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62599305/article/details/133969162
版权

文章目录

前言

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

人才程序员
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
鸿蒙 Text 控件的各种用法
xq610928的博客
04-30 1010
Text Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 支持的XML属性 Text的共有XML属性继承自：Component 创建Text 这里主要讲到的都是 以xml形式为例 java 代码创建也是可以的 在layout目录下的xml文件中创建Text组件。 <Text ohos:id="$+id:text" ohos:width="match_content"
Flutter框架的 Text组件、TextStyle组件、TextSpan组件
努力努力再努力的博客
04-12 2152
Flutter 文件目录 文件夹 作用 android android 平台相关代码 ios ios平台相关代码 lib flutter 相关代码，主要编写的代码 test 测试代码 pubspec.yaml 配置文件，一般存放一些第三方库的依赖 Flutter入口文件、入口方法 入口文件 lib 文件里面的main.dart 文件 import 'package:flutter/material.dart'; void main(){ runApp(MyApp())
在vue3项目中全局引入鸿蒙字体不显示效果
weixin_52741665的博客
04-03 232
4.重点：在main.js中引入css文件目录，而不是在index.html中。2.在asstes创建css文件夹和font文件夹并存放ttf文件。3.css文件中使用@font-face{ }引入文件。1.官网下载好字体后，使用压缩包中的简体中文ttf。
Android 中 Text Span 分析
u011371324的专栏
11-04 2347
1.为什么需要 Span？ 在文本展示时，如果不需要设置样式，包括颜色，大小，对齐方式等属性时，可以利用 View 的属性来控制，但是很多时候我们希望控制颜色，字体大小，对齐方式，段落，超链接点击，甚至是可编辑等特性，这时候就需要能够对文本的一个或者多个字符进行属性控制，所以就有了 span。 span 译为“跨度”，可以理解为就是一个或者多个字符的意思。一个文本可以有多个 span，这些 span 就是用来设置文本的样式，每个 span 标识文本的一个字符或者段落级。这些 span 是附属在文本上的，通过
2024年最新HarmonyOS鸿蒙学习基础篇 - Text文本组件_鸿蒙text组件，阿里p9面试
最新发布
2401_84871020的博客
05-15 491
Text(‘TextOverflow+maxLines’).fontSize(9).fontColor(0xCCCCCC) // 创建一个文本组件，说明接下来的文本溢出设置。Text(‘textAlign’).fontSize(9).fontColor(0xCCCCCC) // 创建一个文本组件，说明接下来的文本对齐设置。Text(‘TextAlign set to Start.’) // 创建一个文本组件，文本起始对齐。不支持Text内同时存在文本内容和Span子组件。
HarmonyOS 的 Text 组件：让文本显示变得更简单
m0_69656288的博客
04-28 638
在 HarmonyOS 中，Text 组件是用于显示文本内容的重要组件，其属性丰富，使用简单。在使用 Text 组件时，需要注意文本长度超出组件宽度的处理、文本行高、支持的颜色格式、支持的字体粗细值等细节。同时，我们也需要遵循一些最佳实践，以提高应用程序的性能和用户体验。希望本文能够帮助大家更好地了解和使用 HarmonyOS 中的 Text 组件，让文本显示变得更简单、更方便。
HarmonyOS（鸿蒙）——Text（文本）组件介绍
Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术
08-21 4762
本文已收录于专栏 [❤️《鸿蒙开发》❤️](https://blog.csdn.net/qq_41125219/category_11227374.html) 欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！ 一、简介 Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 Text组件继承自Componet。 华为官方学习地址： https://develope..
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试”中，我们可以学习到关于HarmonyOS应用开发的关键知识点。这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。...
兼容IE和FF的单行溢出文本显示省略号
09-27
本文主要讲解如何实现一个兼容Internet Explorer（IE）和Firefox（FF）的单行溢出文本显示省略号的效果。这种方法可以让过长的文本在单行内显示，并在超出部分以省略号代替，从而提高用户体验。 首先，我们需要一个...
HTML超出文本显示省略号...通过text-overflow实现
09-28
HTML中的“超出文本显示省略号”功能正是为此而设计的，它可以通过CSS的`text-overflow`属性来实现。`text-overflow`是一个非常实用的样式规则，它可以控制当元素内的文本溢出其边界时如何处理。在标题和描述中提到...
CSS文本超出div或者span时用省略号代替
09-24
首先，我们需要设置容器（通常为`div`或`span`）的宽度，以便限制文本的显示区域。这可以通过`width`属性完成，例如`width: 200px;`，这表示该元素的最大宽度为200像素。 接着，使用`overflow`属性来控制当内容超出...
HTML超出文本显示省略号…通过text-overflow实现
12-13
需要对div或者span同时应用Css： 复制代码代码如下: text-overflow:ellipsis; white-space:nowrap;...即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度，超出了宽度才会显示。
梅科尔工作室-张威-鸿蒙笔记2
m0_72851518的博客
02-03 3973
对ArkTS的图片文本等方面进行了一些总结
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Text文本组件
zy0412326的专栏
12-18 772
设置文本显示的最大行数和截取方式，默认折行显示不截取，如果设置了此参数，则文本最多显示到指定的行，如果有多余的文本，可以通过。：根据文字书写相同的方向对齐，比如中文从左往右排版，那么文本则靠左对齐。：根据文字书写相反的方向对齐，比如中文从左往右排版，那么文本则靠右对齐。是显示文本的基础组件之一，它可以包含子组件。，它将截断后的文本用 "..." 表示。来指定截取方式，本样例的截断方式是。：设置文本的对其方式，对齐参考系是。组件本身的宽度大于文本内容长度，Text控件主要是继承了组件的。
鸿蒙应用开发 | 文本框（Text）和编辑框（TextField）的功能与用法
06-24 4683
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，定时会写一些文章分享给大家，希望多多提意见。 上一篇原创文章解读了鸿蒙开发布局的 自定义布局，也是为了总结一下几种布局的使用，里面牵涉到几个接口和函数，用来自定义布局的设置和监听。 胜利胜利，布局终于完成了，今天加个鸡腿犒劳一下自己。 接下来我们开始学习组件了，组件是界面的显示组件，界面布局是一个大的规划，组件就是每一个布局中的每一个小布局效果。 简介： 为啥要将Text和 TextField一起来讲呢？主要还是关联性比较高，看下...
3.1【HarmonyOS鸿蒙开发】组件Text
hanru723的博客
06-29 1223
作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 一、支持的XML属性 Text的共有XML属性继承自：Component 属性名称 中文描述 取值 取值说明 使用案例 id 控件identity，用以识别不同控件对象，每个控件唯一 integer类型 仅可用于配置控件的id。 ohos:id="$+id:comp.
鸿蒙开发之ArkUI组件常用组件文本输入
iOSbird的博客
03-27 858
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。TextInput为单行输入框、TextArea为多行输入框。
HarmonyOS应用开发实战-解决Grid超过一屏不滚动问题
莫言情怼的博客
01-05 871
前言 Grid容器组件：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 1.Grid的基础使用 华为官方List和Grid的基础使用 2.开发过程遇到的问题：Grid给定高度可以滚动，超过一屏无法滚动 解决方案：全局使用Flex布局，使Grid的高度为.flexGrow(1) build() { Flex({ direction: FlexDirection.Column, alignContent: FlexAlign.Center}) {
鸿蒙：ContentTable、Stack、Flex等组件和布局实现图像、文本显示界面
肖云鹤的博客
11-19 1442
本篇博文实现一个食物详情页的开发Demo 通过这个开发过程学习如何使用容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍
angular.js 中 根据判断条件来决定<span></span>中的显示不同的文本
05-31
在 AngularJS 中，可以使用 `ng-if` 或 `ng-show` 指令以及三元表达式来根据判断条件来决定 `<span></span>` 中显示不同的文本。 使用 `ng-if` 指令： ```html <span ng-if="condition">文本 A</span> <span ng-if="!condition">文本 B</span> ``` 其中，`condition` 是一个布尔类型的变量或表达式，如果为 `true`，则显示文本 A；如果为 `false`，则显示文本 B。 使用 `ng-show` 指令： ```html <span ng-show="condition">文本 A</span> <span ng-show="!condition">文本 B</span> ``` 使用三元表达式： ```html <span>{{condition ? '文本 A' : '文本 B'}}</span> ``` 其中，`condition` 是一个布尔类型的变量或表达式，如果为 `true`，则显示文本 A；如果为 `false`，则显示文本 B。使用三元表达式需要将文本放在双花括号中，这样可以通过 AngularJS 的数据绑定来动态显示文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人才程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值