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.rhkb.cn/news/244743.html

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

相关文章

Flutter 页面嵌入 Android原生 View

前言 文章主要讲解Flutter页面如何使用Android原生View,但用到了Flutter 和 Android原生 相互通信知识,建议先看完这篇讲解通信的文章 Flutter 与 Android原生 相互通信:BasicMessageChannel、MethodChannel、EventChannel-CSDN博客 数据观…

Java面试题50道

文章目录 1.谈谈你对Spring的理解2.Spring的常用注解有哪些3.Spring中的bean线程安全吗4.Spring中的设计模式有哪些5.Spring事务传播行为有几种6.Spring是怎么解决循环依赖的7.SpringBoot自动配置原理8.SpringBoot配置文件类型以及加载顺序9.SpringCloud的常用组件有哪些10.说一…

rabbitmq基础-java-5、Topic交换机

1、简介 Topic类型的Exchange与Direct相比,都是可以根据RoutingKey把消息路由到不同的队列。 只不过Topic类型Exchange可以让队列在绑定BindingKey 的时候使用通配符! BindingKey 一般都是有一个或多个单词组成,多个单词之间以.分割&#x…

(SSO单点登录)多个系统之间如何实现账号互通

SSO具有以下优点: 降低访问第三方网站风险;降低用户名和密码的管理成本;提高用户试用满意度;SSO使用标准的身份认证和授权协议,如OAuth、OpenID Connect等,可以保障用户身份的安全性和隐私性。 单点登录最大…

文件上传技术总结

语言可解析的后缀 (前提:在Apache httpd.conf 配置文件中有特殊语言的配置 AddHandler application/x-httpd-php .php 搭配大小写、双重、空格来进行 其中: phtml、pht、php3、php4和php5都是Apache和php认可的php程序的文件后缀 常见的…

C#使用IsLeapYear方法判断指定年份是否为闰年

目录 一、判断指定年是否为闰年的2个方法 1.使用IsLeapYear方法判断指定年份是否为闰年 2.使用自定义的算法计算指定年份是否为闰年 二、示例 1.方法1的实例 2.方法2的实例 一、判断指定年是否为闰年的2个方法 1.使用IsLeapYear方法判断指定年份是否为闰年 使用IsLeapY…

【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解

前言:本文进行布线铺铜实战及详解布线铺铜的细节 在本专栏中【立创EDA-PCB设计基础】前面完成了布线铺铜前的设计规则的设置,接下来进行布线 布局原则是模块化布局(优先布局好确定位置的器件,例如排针、接口、主控芯片&#xff…

司铭宇老师:门店经理培训:如何成为一位卓越的门店经理

门店经理培训:如何成为一位卓越的门店经理 在激烈的市场竞争中,门店经理作为门店的灵魂人物,肩负着提升门店业绩、维护品牌形象、带领团队成长等重要职责。本文将为您解析如何成为一位卓越的门店经理,助力您的职业生涯迈向新高峰…

【latex】在Overleaf的IEEE会议模板中,快速插入参考文献

【LaTeX】在Overleaf的IEEE会议模板中,快速插入参考文献 写在最前面第一步:在文献检索网站导出引用文献的bib文件第二步:编辑overleaf模版方法二:EduBirdie生成参考文献(补充)使用LaTeX在Overleaf的IEEE会议…

html火焰文字特效

下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5火焰文字特效DEMO演示</title><link rel"stylesheet" href"css/style.css" media"screen" type&quo…

接口测试 02 -- JMeter入门到实战

前言 JM eter毕竟是做压测的工具&#xff0c;自动化这块还是有缺陷。 如果公司做一些简单的接口自动化&#xff0c;可以考虑使用JMeter快速完成&#xff0c;如果想做完善的接口自动化体系&#xff0c;建议还是基于Python来做。 为什么学习接口测试要先从JMeter开始&#xff1f;…

路由器配置虚拟服务器

文章目录 路由器配置虚拟服务器1.前言2.配置流程2.1 进入路由器的登录页面2.2 找到端口映射功能2.3 添加虚拟服务器2.4 查找路由器的动态IP2.5 SSH连接 路由器配置虚拟服务器 1.前言 局域网下面连接着路由器&#xff0c;路由器下面连接着服务器&#xff0c;我们自己的电脑想要…

Unity | 渡鸦避难所-8 | URP 中利用 Shader 实现角色受击闪白动画

1. 效果预览 当角色受到攻击时&#xff0c;为了增加游戏的视觉效果和反馈&#xff0c;可以添加粒子等动画&#xff0c;也可以使用 Shader 实现受击闪白动画&#xff1a;受到攻击时变为白色&#xff0c;逐渐恢复为正常颜色 本游戏中设定英雄受击时播放粒子效果&#xff0c;怪物…

什么是ORM思想?

1. ORM概念 ORM&#xff08;Object Relational Mapping&#xff09;对象关系映射模式&#xff0c;是一种技术&#xff0c;解决了面向对象与关系型数据库存互不匹配的现象。 ORM在业务逻辑层和数据库层之间充当了桥梁的作用。 2. ORM由来 在软件开发的过程中&#xff0c;通常…

【每日一题】最长交替子数组

文章目录 Tag题目来源解题思路方法一&#xff1a;双层循环方法二&#xff1a;单层循环 写在最后 Tag 【双层循环】【单层循环】【数组】【2024-01-23】 题目来源 2765. 最长交替子数组 解题思路 两个方法&#xff0c;一个是双层循环&#xff0c;一个是单层循环。 方法一&am…

C++——结构体

1&#xff0c;结构体基本概念 结构体属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型。像int&#xff08;整型&#xff09;&#xff0c;浮点型&#xff0c;bool型&#xff0c;字符串型等都是属于系统内置的数据类型。而今天要学习的结构体则是属于我们自定义…

Redis(五)

1、布隆过滤 1.1、简介 由一个初值都为零的bit数组和多个哈希函数构成&#xff0c;可以用来快速判断集合中是否存在某个元素&#xff0c;减少占用内存&#xff0c;不保存数据信息&#xff0c;只是在内存中做出一个标记。 它实际上是一个很长的二进制数组(00000000)一系列随机h…

Linux破解密码

破解root密码&#xff08;Linux 7&#xff09; 1、先重启——e 2、Linux 16这一行 末尾加rd.break&#xff08;不要回车&#xff09;中断加载内核 3、再ctrlx启动&#xff0c;进入救援模式 4、mount -o remount&#xff0c;rw /sysroot/——&#xff08;mount挂载 o——opti…

浅学JAVAFX布局

JAVAFX FlowPane布局 Flowpane是一个容器。它在一行上排列连续的子组件&#xff0c;并且如果当前行填充满了以后&#xff0c;则自动将子组件向下推到一行 public class FlowPanedemo extends Application {Overridepublic void start(Stage stage) throws Exception {stage.s…

【网站项目】医院管理系统源码(有源码)

🙊作者简介:多年一线开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板,帮助书写开题报告。作者完整代码目录供你选择: 《Springboot网站项目…