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

该组件从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.mzph.cn/news/646759.shtml

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

相关文章

KG110写频 AT28C64芯片替换

上一个文章写了写频计算公式 https://blog.csdn.net/firseve/article/details/135743549 没想到就几天好多人给点赞,这个中继现在还有很多人在使用么?谁能给解个惑 今天搜了下这个中继设备,默认原机器使用的芯片是 2716 2732 (2…

php怎么输入一个变量,http常用的两种请求方式getpost(ctf基础)

php是网页脚本语言,网页一般支持两种提交变量的方式,即get和post get方式传参 直接在网页URL的后面写上【?a1027】,如果有多个参数则用&符号连接, 如【?a10&b27】 post方式传参 需要借助插件,ctfer必备插…

自学C语言-6

第6章 选择结构程序设计 顺序结构程序设计最简单,但通常无法解决生活中的选择性问题。选择结构程序设计需要用到一些条件判断语句,可实现的程序功能更加复杂,程序的逻辑性与灵活性也更加强大。 本章致力于使读者掌握使用if语句进行条件判断的…

OpenHarmony开发——GN快速上手

背景 最近在研究鸿蒙操作系统的开源项目OpenHarmony,该项目使用了GNNinja工具链进行配置,编译,于是开始研究GN如何使用。 本文的所有信息均来自GN官网和本人个人体会。 GN快速入门 使用GN GN的主要功能是根据配置文件(.gn, BU…

交换机跨VLAN交换数据ip跳转分析(不一定对)

在网上看到这样一个实验: 交换机1、交换机2分别连接到一台防火墙上,要求使VLAN 2、VLAN3、VLAN5、VLAN6中的终端可互相访问。 拓补 参考链接 【数通网络交换基础梳理2】三层设备、网关、ARP表、VLAN、路由表及跨网段路由下一跳转发原理_网管型交的机…

DC60V降压恒流 3A电流 直播美颜补光灯专用降压IC

DC60V降压恒流3A电流直播美颜补光灯专用降压IC 随着直播行业的兴起,美颜补光灯成为了直播中不可或缺的设备之一。然而,不同的直播设备和场景需要不同的灯光效果,因此需要一款能够提供稳定、高质量照明的补光灯。其中,DC60V降压恒流…

CentOS7自动备份数据库到git

虽然数据库没什么数据,但是有就是珍贵的啦,为了服务器什么的无了,所以还是要自动备份一下比较好。 Open备忘第一页 步骤 在Gitee(github)上创建一个私有仓库Gitee(github)配置好服务器的ssh在服…

论文阅读:Vary-toy论文阅读笔记

目录 引言整体结构图方法介绍训练vision vocabulary阶段PDF数据目标检测数据 训练Vary-toy阶段Vary-toy结构数据集情况 引言 论文:Small Language Model Meets with Reinforced Vision Vocabulary Paper | Github | Demo 说来也巧,之前在写论文阅读&…

微信小程序开发如何实现圆形按钮/圆角按钮

圆形按钮&#xff1a; 显示&#xff1a; 实现 .wxml <view style"width: 100%;height:200rpx;display: flex; align-items: center;justify-content: center;"><view style"width:20px; height:20px; border-radius: 50%; background-color: red; t…

134. 加油站 - 力扣(LeetCode)

题目描述 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数数组 gas 和…

SHA加密在实际应用中的优势与局限

SHA加密算法简介 SHA&#xff08;Secure Hash Algorithm&#xff09;加密算法是一种单向加密算法&#xff0c;常用于加密数据的完整性校验和加密签名。它是由美国国家安全局&#xff08;NSA&#xff09;设计并广泛应用于各种安全场景。SHA加密算法具有较高的安全性和可靠性&…

线性代数速通

二---矩阵 逆矩阵 抽象矩阵求逆 数字型矩阵求逆 二阶矩阵求逆秒杀 解矩阵方程 方阵 伴随矩阵 三---向量组的线性相关性 线性表示 数字型向量组 线性相关性判断 抽象型向量组 线性相关性判断 向量组的秩与极大无关组 四---线性方程组 齐次方程组 基础解系 通解 非齐…

定制工厂实时数据采集系统 优秀智能制造信息系统服务

工业数据采集是指通过传感器、仪表等设备将工业生产过程中的各种数据进行采集和记录,以便进行数据分析、监控和优化。但现状却是引入的各自动化设备、仪器等各自为政&#xff0c;或者进显示检测数据&#xff0c;难以实现数据连通&#xff0c;难以统一处理&#xff0c;定制的数据…

并查集与图

并查集与图 一、并查集概念实现原理代码实现查找根节点合并两颗树判断是否是同一棵树树的数量 二、图的基本概念定义分类完全图顶点的度连通图 三、图的存储结构分类邻接表邻接表的结构代码实现 邻接矩阵代码实现 四、图的遍历方式广度优先深度优先 五、最小生成树概念Kruskal算…

网络原理-初识(2)

协议分层 对于网络协议来说,往往分成几个层次进行定义. 网络通信的过程中,需要涉及到的细节,其实非常多.如果要有一个协议来完成网络通信,就需要约定好方方面面的内容,导致非常复杂. 而如果拆分的话,就十分复杂,庞大,因此需要分层. 什么是协议分层 即只有相邻的层次可以沟通,…

代码随想录 Leetcode102. 二叉树的层序遍历

题目&#xff1a; 代码(首刷看解析 2024年1月24日&#xff09;&#xff1a; class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {vector<vector<int>> res;if(root nullptr) return res;queue<TreeNode*> que;TreeNode…

蓝桥杯备战——5.动态数码管扫描

1.分析原理图 经查阅说明书得知数码管为共阳极&#xff0c;共阳端口接到了U8,而段码接到了U7。 如果需要选中U8,我们只需要将P250;P261;P271; 如果需要选中U7,我们只需要将P251;P261;P271; 2.代码示例 void Delay1ms() //12.000MHz {unsigned char data i, j;i 12;j 169;…

【2024】新建mysql数据库,如何选择字符集和排序规则

如何使用 Navicat 新建 MySQL 数据库&#xff0c;并选择字符集与排序规则 如何使用 Navicat 新建 MySQL 数据库并选择字符集与排序规则1. 开始之前2. 新建数据库步骤 1: 打开 Navicat步骤 2: 创建新数据库步骤 3: 填写数据库名称 常见的字符集和排序规则及其选择场景1. 字符集&…

7.前端--CSS-复合选择器

1.什么是复合选择器 复合选择器是由两个或多个基础选择器&#xff0c;通过不同的方式组合而成的&#xff0c;可以更准确、更高效的选择目标元素&#xff08;标签&#xff09; 常用的复合选择器包括&#xff1a;后代选择器、子选择器、并集选择器、伪类选择器等等 2.后代选择器 …

flink基础概念之什么是时间语义

什么是时间语义 Flink支持三种不同的时间语义&#xff0c;以便处理流式数据中的事件时间、处理时间和摄入时间。 1. 处理时间&#xff08;Processing Time&#xff09; 处理时间的概念非常简单&#xff0c;就是指执行处理操作的机器的系统时间。 在这种时间语义下处理窗口非…