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.mfbz.cn/a/346183.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChromeDriver谷歌驱动最新版安装120/121/122

chromeDriver最新版本下载 最新驱动 https://googlechromelabs.github.io/chrome-for-testing/参考: https://blog.csdn.net/m0_57382185/article/details/134007615

Transfomer相关最新研究

文章目录 iTransformerContiFormerBasisFormerMTSTMultiResFormerFPPformerDOzerfomerCSformerMASTERPCA former **PDFPathformerVQ-TR iTransformer ContiFormer BasisFormer MTST MultiResFormer FPPformer DOzerfomer CSformer MASTER PCA former ** PDF Pathformer VQ-TR…

VG-4231CE压控晶体振荡器

随着科技的飞速发展,各类电子设备对于稳定且精确的信号需求越来越高。VG-4231CE压控晶体振荡器(VCXO),它能提供稳定的工作环境和高精度信号,助您轻松应对各种高难度信号处理任务。3MHz至50MHz的频率范围,输…

云卷云舒:PostgreSQL的事儿你听说了吗?

最近,PostgreSQL公布了全球贡献者名单。 以上是全球贡献者主要成员,可以看出都是外国人,除了一名台湾省贡献者外,几乎再看不到中国贡献者的身影。 那么偌大的中国,为什么在PostgreSQL的全球贡献者名单里面就看不到人呢…

linux 安装 grafana

Ubuntu 和 Debian(64 位)SHA256: e551434e9e3e585633f7b56a33d8f49cda138d92ad69c2c29dcec2c3ede84607 sudo apt-get install -y adduser libfontconfig1 muslwget https://dl.grafana.com/enterprise/release/grafana-enterprise_10.2.3_amd64.debsudo dpkg -i gra…

4.Hive表更新字段信息,一次讲明白

Hive表更新字段信息 一、更新表字段语句1、修改字段名称2、修改字段类型3、修改字段备注 二、总结 一、更新表字段语句 ALTER TABLE table_name [PARTITION partition_spec] CHANGE [COLUMN] col_old_name col_new_name column_type[COMMENT col_comment] [FIRST|AFTER column…

深度学习(5)--Keras实战

目录 一.Keras基础概念 二.如何跑通Keras项目 2.1.在cmd上跑通 2.2.在PyCharm上跑通 一.Keras基础概念 Keras是深度学习中的一个神经网络框架,是一个高级神经网络API,用Python编写,可以在TensorFlow,CNTK或Theano之上运行。 …

SpringCloud Alibaba Sentinel 与 SpringCloud Gateway 的限流有什么差别?(三种限流算法原理分析)

目录 一、Sentinel 与 Gateway 的限流有什么差别? 1.1、前置知识 - 四种常见的限流算法 1.1.1、Tips 1.1.2、计数器算法 1)固定窗口计数器算法 2)滑动窗口计数器算法 1.1.3、令牌桶算法 1.1.4、漏桶算法 1.2、解决问题 一、Sentinel…

如何通过 Nginx 反向代理提高网站安全性和性能?

如何通过 Nginx 反向代理提高网站安全性和性能? 引言Nginx 反向代理的基本原理什么是反向代理?反向代理的工作方式反向代理的好处 配置 Nginx 反向代理的基本步骤1. 安装 Nginx2. 编辑 Nginx 配置文件3. 设置反向代理配置4. 测试并重启 Nginx 提高安全性…

NineData支持制定安全、可靠的SQL开发规范

在和数据库打交道中,不管是数据库管理员(DBA)还是开发人员,经常会做一些CURD操作。因为每个人对数据库的了解程度不一样,所以在项目上线时,往往还需要专职人员对数据库的CURD操作进行审核,确保C…

第21课 在Android Native开发中架起java与c++互通的桥梁

在开始本节课,我尝试把项目拷贝到另一台电脑上以便继续工作,但出现了大量的“could not be resolved”问题,尝试包含新的include路径也无法解决该问题,最后删除了项目的Native Support,然后重新添加Native Support才解…

1.19号网络

超时检测 概念 1> 在网络通信中,有很多函数是阻塞函数,会导致进程的阻塞,例如:accept、recv、recvfrom、等等 2> 为了避免进程在阻塞函数处,无休止的等待,我们可以设置一个超时时间,当…

unity学习笔记----游戏练习05

一、阳光的收集和搜集动画开发 1.收集阳光的思路:当鼠标点击到阳光的时候,就可以进行收集了。可以通过为添加一个碰撞器来检测Circle Collider 2D 编写脚本: 在SunManager中写一个增加阳光的方法 //增加阳光 public void AddSubSun(in…

如何利用streamlit 將 gemini pro vision 進行圖片內容介紹

如何利用streamlit 將 gemini pro vision 進行圖片內容介紹 1.安裝pip install google-generativeai 2.至 gemini pro 取 api key 3.撰寫如下文章:(方法一) import json import requests import base64 import streamlit as st 讀取圖片檔案,並轉換成 Base64 編…

51-15 视频理解串讲—TimeSformer论文精读

今天读的论文题目是Is Space-Time Attention All You Need for Video Understanding? Facebook AI提出了一种称为TimeSformer视频理解的新架构,这个架构完全基于transformer,不使用卷积层。它通过分别对视频的时间和空间维度应用自注意力机制&#xff…

SpringBoot 3.1.7 集成Kafka 3.5.0

一、背景 写这边篇文章的目的,是记录我在集成kafka客户端遇到的一些问题,文章会记录整个接入的过程,其中会遇到几个坑,如果需要最终版本,直接看最后一节就行了,感觉Spring-Kafka的文档太少了,如…

linux更新内核

内核介绍 官网链接:https://kernel.org 内核下载库: https://mirrors.edge.kernel.org/pub/linux/kernel/ 更新软件源 rootcary:~# apt-get update rootcary:~# sudo apt-get install libncurses5-dev build-essential kernel-package flex bison libelf-dev libssl-dev 下…

大数据学习之Redis、从零基础到入门(一)

目录 一、Redis入门概述 1. 是什么? 官方解释: 2. 能干嘛? 2.1 主流功能与应用 2.1.1分布式缓存 2.1.2内存存储和持久化(RDBAOF) 2.1.3高可用架构搭建 2.1.4缓存穿透、击穿、雪崩 2.1.5分布式锁 2.1.6队列 2.2 总体功能概括 2.3…

基于Java SSM框架实现在线考试系统项目【项目源码+论文说明】

基于java的SSM框架实现在线考试系统演示 摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识&#…

面试知识点:notify是随机唤醒线程吗(唤醒线程顺序)?

做 Java 开发的小伙伴,对 wait 方法和 notify 方法应该都比较熟悉,这两个方法在线程通讯中使用的频率非常高,但对于 notify 方法的唤醒顺序,有很多小伙伴的理解都是错误的,有很多人会认为 notify 是随机唤醒的&#xf…
最新文章