第九节HarmonyOS 常用基础组件-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/189648.shtml

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

相关文章

segment-anything安装教程

文章目录 一. segment-anything安装教程 一. segment-anything安装教程 官网安装说明:https://github.com/facebookresearch/segment-anything anaconda下新建一个环境 conda create -n sam python3.8激活新建的环境 conda activate sam更换conda镜像源 conda config --add ch…

基于Spring,SpringMVC,MyBatis的高校大学社团系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring,SpringMVC,MyBatis的高校大…

大厂面试整理

文章目录 1、[京东一面](https://blog.csdn.net/crazymakercircle/article/details/132150378)2、[阿里一面](https://blog.csdn.net/crazymakercircle/article/details/131147192)3、[顺丰一面](https://blog.csdn.net/crazymakercircle/article/details/132000420)4、[美团一…

Python过滤掉特定区域内的矩形框

Python过滤掉特定区域内的矩形框 前言前提条件相关介绍实验环境过滤掉特定区域内的矩形框方法一:直接法(for循环遍历)代码实现输出结果 方法二:列表推导式代码实现输出结果 前言 由于本人水平有限,难免出现错漏&#x…

Navicat Premium 16.3.3 Windows x64 Crack

增强您的表现。 Navicat 16 具有许多改进和功能,可以满足您的数据库开发需求。凭借 100 多项增强功能和全新界面,您可以探索构建、管理和维护数据库的新方法。构建时考虑到可用性。 Navicat 16 引入了许多 UI/UX 改进,以最大限度地提高您的效…

oracle 19c rac 安装手册

oracle 19c rac 安装手册 官方文档:https://docs.oracle.com/en/database/oracle/oracle-database/19/index.html 一、集群规划 再部署集群之前,需要对网络和存储两个方面进行规划。下面简述了网络和存储两个方面需要注意的地方。 Oracle RAC 数据库私有网络通信必须使用单…

P4 链表的节点数统计与链表数据查找替换

目录 前言 01 链表的节点数统计 02 链表数据查找替换 2.1 残疾的数据查找 2.2 数据查找优化 前言 🎬 个人主页:ChenPi 🐻推荐专栏1: 《C 》✨✨✨ 🔥 推荐专栏2: 《 Linux C应用编程(概念类)》✨…

Java集合(二)

1. Map 1.1 HashMap 和 Hashtable 的区别 线程是否安全: HashMap 是非线程安全的,Hashtable 是线程安全的,因为 Hashtable 内部的方法基本都经过synchronized 修饰。(如果你要保证线程安全的话就使用 ConcurrentHashMap 吧!&…

Yocto - bb脚本中使用的SRC_URI、SRCREV和S

我们遇到的各种自己不了解的技术或产品时,都需要阅读用户手册。用户手册里的内容很多时,除了由目录组织文档结构外,通常还有有一个词汇表,一般作为附录放在文档最后。 通过这个按照字母排序的词汇表,可以在对整个文档还…

C#,数值计算——插值和外推,谢别德(Shep)插值方法的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 谢别德插值方法 /// Object for Shepard interpolation using n points in dim dimensions. Call /// constructor once, then interp as many times as desired. /// &…

前端面试提问(3)

1、js两个数相加会不会丢精度&#xff1f; 可能会遇到精度丢失的问题。JavaScript 使用的是 IEEE 754 浮点数标准&#xff0c;即一种二进制表示法&#xff0c;有时不能准确地表示十进制小数。如果你需要进行精确的十进制数值计算&#xff0c;可以使用一些处理精确数值的库&…

4.C转python

1.建立函数: def 函数名(形参): 函数体(记得写缩进) return 返回值(python中可以没有return) 2.调用函数: 函数名(实参) 实参和形参个数相等即可,类型不需要相同 其中接收返回值与C中的差不多 3.如果只是定义而不调用则函数不会执行 4.先定义函数,后调用 5.python中可以…

每天五分钟计算机视觉:ImageNet大赛的世界冠军AlexNet模型

AlexNet模型 2012 Imagenet 比赛第一&#xff0c;Top5准确度超出第二10% &#xff0c;它让人们认识到了深度学习技术的威力。比 LeNet更深&#xff0c;用多层小卷积层叠加替换大卷积层&#xff0c;就是说每一个卷积层的通道数小&#xff0c;不像LeNet一样每个卷积层的通道数很大…

记录华为云服务器(Linux 可视化 宝塔面板)-- 防火墙篇

文章目录 前言安装防火墙防火墙设置防火墙操作1.设置开机启动防火墙2.查看防火墙开放哪些端口3.重载防火墙配置&#xff08;修改配置后重新启动才生效&#xff09;4.查看防火墙状态5.开启防火墙6.关闭防火墙 若遇到无法开启查询已开放的端口查询端口是否开放&#xff08;80&…

简单了解设计模式

常见的设计模式大致可以分为三个主要类别&#xff1a;创建型、结构型和行为型。以下是这三个类别下的各种模式&#xff1a; 创建型模式 (Creational Patterns)&#xff1a;这类模式主要关注如何创建对象。 单例模式 (Singleton)&#xff1a;确保某一个类只有一个实例&#xff0…

在内网开发中使用Nginx代理来访问钉钉新版服务端API

如果你在内网开发中使用Nginx代理来访问钉钉新版服务端API&#xff0c;你可以在Nginx配置文件中进行相应的配置。 以下是一个简单的示例Nginx配置&#xff0c;用于将对指定URL的请求代理到钉钉服务端API&#xff1a; server { listen 80; server_name your_server_domain; l…

Python爬虫-新能源汽车销量榜

前言 本文是该专栏的第11篇,后面会持续分享python爬虫案例干货,记得关注。 本文以懂车平台的新能源汽车销量榜单为例,获取各车型的销量排行榜单数据。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。 废话不多说,跟着笔者直接往下看正文详细内容。(附带…

FFMPEG编译安装、简单使用

目录 源码下载编译和安装API简单使用源代码编译运行 工具的简单使用学习论坛 源码下载 地址: https://github.com/FFmpeg/FFmpeg git clone https://github.com/FFmpeg/FFmpeg.git编译和安装 因为使用在板端编译&#xff0c;因此没有使用交叉编译链的部分。将如下内容复制到…

电梯安全远程监控系统的主要作用和意义

电梯是现代城市生活中必不可少的交通工具&#xff0c;为了保证其安全可靠的运行&#xff0c;电梯运行监测系统应运而生。本文将介绍电梯安全远程监控的工作原理、重要性 一、电梯安全远程监控系统的作用   ◆实时监控和故障预警&#xff1a;电梯安全远程监控系统可以实时监测…

加强网站稳定性!学习如何进行高效压力测试!

前言 1、什么是压力测试&#xff1f; 软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。 软件压力测试的基本思路很简单&#xff1a;不是在常规条件下运行手动或自动测试&#xff0c;而是在计算机数量较少或系统资源匮乏的条件下运行测试…