第九节HarmonyOS 常用基础组件1-Text

一、组件介绍

        组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。

        组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件时视图层的基本组成单位,包括Text、Image、TextInput、Buttton、LoadingProgress等。

下面我们将分别介绍这些常用基础组件的使用:

  • Text

Text组件用于在界面上展示一段文本信息,可以包含子组件Span。

  1. 文本样式

        针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体,文本样式的属性如下表:

名称

参数类型

描述

fontColor

ResourceColor

设置文本颜色。

fontSize

Length | Resource

设置文本尺寸,Length为number类型时,使用fp单位。

fontStyle

FontStyle

设置文本的字体样式。默认值:FontStyle.Normal。

fontWeight

number | FontWeight | string

设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal。

fontFamily

string | Resource

设置文本的字体列表。使用多个字体,使用“,”进行分割,优先级按顺序生效。例如:“Arial,sans-serif”。

示例代码中包含两个Text组件,第一个使用的是默认样式,第二、三个自己给文本设置了一些文本样式。

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text('HarmonyOS')Text('HarmonyOS').fontColor(Color.Red).fontSize(22).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')Text('HarmonyOS').fontColor(Color.Green).fontSize(26).fontStyle(FontStyle.Normal).fontWeight(700).fontFamily('sans-serif')}.width('100%')}.height('100%')}
}

2、设置文本对齐方式

使用textAlign属性可以设置文本的对齐方式,示例代码如下:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text('HarmonyOS').width(200).backgroundColor(Color.Yellow).textAlign(TextAlign.Start)Text('HarmonyOS').fontColor(Color.Red).fontSize(22).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').width(200).margin({ top: 12 }).backgroundColor(Color.Yellow).textAlign(TextAlign.Center)Text('HarmonyOS').fontColor(Color.Green).fontSize(26).fontStyle(FontStyle.Normal).fontWeight(700).fontFamily('sans-serif').width(200).margin({ top: 12 }).backgroundColor(Color.Yellow).textAlign(TextAlign.End)}.width('100%')}.height('100%')}
}

textAlign参数类型为TextAlign,定义了以下几种类型:

  • Start(默认值):水平对齐首部。

  • Center:水平居中对齐。

  • End:水平对齐尾部。

3、设置文本超长显示

        当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text('This is the text content of Text Component This is the text content of Text Component')Blank(10)Text('This is the text content of Text Component This is the text content of Text Component').fontSize(16).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).backgroundColor(0xE6F2EE)}.width('100%')}.height('100%')}
}

效果图如下:

4、设置文本装饰线

        使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。

        decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。

下面的示例代码给文本设置了下划线,下划线颜色为黑色:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text('HarmonyOS').fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }).backgroundColor(Color.Gray)}.width('100%')}.height('100%')}
}

效果图如下:

TextDecorationTyp包含以下几种类型:

  • None:不使用文本装饰线。
    .decoration({ type: TextDecorationType.None, color: Color.Red })
  • Overline:文字上划线修饰。
.decoration({ type: TextDecorationType.Overline, color: Color.Red })

  • LineThrough:穿过文本的修饰线。
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red })

  • Underline:文字下划线修饰。
.decoration({ type: TextDecorationType.Underline, color: Color.Red })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/191716.shtml

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

相关文章

微服务实战系列之MemCache

前言 书接前文,马不停蹄,博主继续书写Cache的传奇和精彩。 Redis主要用于数据的分布式缓存,通过设置缓存集群,实现数据的快速响应,同时也解决了缓存一致性的困扰。 EhCache主要用于数据的本地缓存,因无法保…

优先队列详解

优先队列是计算机科学中的一种抽象数据类型,它是一种队列:元素拥有优先级,优先级最高的元素最先得到服务;优先级相同的元素按照在集合中的顺序得到服务。优先队列有两种主要的实现方法:堆和二叉搜索树。 简单来说&…

IO多路复用(select函数、poll函数、epoll函数)

select函数&#xff1a; #include <sys/select.h>int select(int nfds, fd_set *readfds, fd_set *writefds,fd_set *exceptfds, struct timeval *timeout);/*参数&#xff1a;nfds&#xff1a; 要监视的最大文件描述符1readfds&#xff1a; 要监视的读文件描述符集合 不…

unix dgram通信

# 同一个机器多个进程间通信&#xff0c;unix比AF_INET效率更高 # client import socket # 导入 socket 模块 import os import threading import timeclass SocketClient(threading.Thread):def __init__(self):super(SocketClient, self).__init__()self._addr…

基于社区电商的Redis缓存架构-写多读多场景下的购物车缓存架构

社区电商的购物车缓存架构 在购物车中的功能主要有这几个&#xff1a;商品加入购物车、查看购物车列表、删除购物车商品、选中购物车商品进行结算 这里购物车的场景和之前用户信息以及菜谱分享信息还不同&#xff0c;如果在举办了大型购物活动时&#xff0c;购物车可能需要面…

Web(7)内网渗透

一&#xff0e;内网配置 网络情况 在进行IP配置的时候&#xff0c;根据其情况需要在不同的网卡进行配置。如果采用桥接模式的话&#xff0c;需要在以太网网卡上进行配置 期间有个问题&#xff0c;即window Server的静态IP老是分配不成功&#xff0c;原来是与虚拟网卡1DHCP分配…

号称要做人民货币的Spacemesh,有何新兴叙事?

​打开Spacemesh的官网&#xff0c;率先映入眼帘的是一个响亮的口号——On a quest to become the people’s coin&#xff08;致力于成为人民的货币&#xff09;&#xff01;Spacemesh 联合创始人 Tomer Afek 曾表示“Spacemesh 的低准入门槛和激励兼容性&#xff0c;激发了从…

BootLoader升级过程讲解与串口升级案列

一、芯片选择 STM32F103RCT6 FLASH容量&#xff1a;512K RAM容量&#xff1a;48K 二、升级方式选择&#xff1a; 串口升级、网口升级、4G升级、SD卡升级等等。 1、SD卡升级属于升级文件事先存储在外部FLASH&#xff0c;不需要考虑获取升级文件的代码和升级文件存放的位置&am…

前端面试JS— JS数据类型及相关内容

目录 JS数据类型 基本数据类型&#xff1a; 引用数据类型&#xff1a; 两种数据存储方式&#xff1a; 两种数据类型的区别&#xff1a; 数据类型的检测方式 null和undefined区别 JS数据类型 基本数据类型&#xff1a; Number&#xff0c;String&#xff0c;Boolean&#xff0c;…

Python库Selenium自动化使用详细教程

一、安装Selenium pip install Selenium 二、初始化浏览器 Chrome 是初始化谷歌浏览器Firefox 是初始化火狐浏览器Edge 是初始化IE浏览器PhantomJS 是一个无界面浏览器。 from selenium import webdriverdriver webdriver.Chrome() 三、设置浏览器大小 maximize_window …

嵌入式 C 语言中的全局变量问题

大家好&#xff0c;今天分享一篇关于嵌入式C编程中全局变量问题的文章。希望对大家有所启发。 嵌入式特别是单片机os-less的程序&#xff0c;最易范的错误是全局变量满天飞。 这个现象在早期汇编转型过来的程序员以及初学者中常见&#xff0c;这帮家伙几乎把全局变量当作函数形…

十种接口安全方案!!!

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、数据加密&#xff0c;防止报文明文传输。 二、数据加签验签 2.1 什么是加签验签呢&#xff1f; 2.2 有了https等加密数据&am…

Azure Machine Learning - 使用.NET创建和管理AI搜索功能

本文介绍了如何在 Azure SDK for .NET 中使用 C# 和 Azure.Search.Documents客户端库来创建和管理搜索对象。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室…

【DPDK】Trace Library

概述 跟踪是一种用于了解运行中的软件系统中发生了什么的技术。用于跟踪的软件被称为跟踪器&#xff0c;在概念上类似于磁带记录器。记录时&#xff0c;放置在软件源代码中的特定检测点会生成保存在巨大磁带上的事件&#xff1a;跟踪文件。稍后可以在跟踪查看器中打开跟踪文件…

java学习part29线程通信

139-多线程-线程间的通信机制与生产者消费者案例_哔哩哔哩_bilibili 1.等待唤醒 类似于golang的channel&#xff0c; 1.1用法 类似于go的wait()&#xff0c; 1.sleep和wait的一个重大区别是&#xff0c;sleep不会让线程失去同步监视器&#xff0c;而wait会释放 2.wait必须tr…

【vSphere 8 自签名 VMCA 证书】企业 CA 签名证书替换 vSphere VMCA CA 证书Ⅱ—— 创建和添加证书模板

目录 3. 使用 Microsoft 证书颁发机构创建 VMCA 证书模板3.1 打开 Certificate Template Console3.2 复制模板修改 Compatibility 选项卡修改 General 选项卡修改 Extensions 选项卡确认新模板 4. 将新模板添加到证书模板4.1 打开 Certificate Console4.2 创建证书模板 关联博文…

torch打印一个深度网络的所有参数和参数名

可以使用以下代码打印一个torch网络的所有参数和参数名&#xff1a; import torchdef print_model_param_names(model):for name, param in model.named_parameters():print(name)def print_model_param_values(model):for name, param in model.named_parameters():print(nam…

【论文阅读】Bayes’ Rays:神经辐射场的不确定性量化

【论文阅读】Bayes’ Rays&#xff1a;神经辐射场的不确定性量化 1. Introduction2. Related work3. Background3.2. Neural Laplace Approximations 4. Method4.1. Intuition4.2. Modeling perturbations4.3. Approximating H4.4. Spatial uncertainty 5. Experiments & A…

【数据结构】最短路径(Dijskra算法)

一.引例 计算机网络传输的问题&#xff1a; 怎样找到一种最经济的方式&#xff0c;从一台计算机向网上所有其他计算机发送一条消息。 抽象为&#xff1a; 给定带权有向图G&#xff08;V&#xff0c;E&#xff09;和源点v&#xff0c;求从v到G中其余各顶点的最短路径。 即&…

Mybatis-Plus测试出现java.lang.IllegalStateException异常

注意要用SpringBoot2&#xff0c;目前的Mybatis-Plus最新版本好像不兼容SpringBoot3&#xff0c;会出现java.lang.IllegalStateException异常。 在做Mybatis-Plus入门案例的时候&#xff0c;进行单元测试会出现java.lang.IllegalStateException异常。最新的依赖如下&#xff1…