鸿蒙next版开发:ArkTS组件通用属性(文本通用)

在HarmonyOS 5.0中,ArkTS提供了一系列的文本通用属性,这些属性可以应用于文本组件,以实现丰富的文本显示和样式效果。本文将详细解读这些通用属性,并提供示例代码进行说明。

文本通用属性

textAlign属性

textAlign属性用于设置文本的对齐方式。这个属性在文本组件的宽度大于文本内容长度时才起作用。TextAlign定义了以下三种类型:

  • Start(默认值):根据文字书写方向对齐,例如中文从左往右排版,则文本靠左对齐。
  • Center:文本居中对齐。
  • End:根据文字书写相反的方向对齐,例如中文从左往右排版,则文本靠右对齐。
Text("Hello, OpenHarmony").backgroundColor('#aabbcc').textAlign(TextAlign.Center); // 文本居中对齐

maxLines和textOverflow属性

maxLines属性用于设置文本显示的最大行数,而textOverflow属性用于指定超出最大行数时文本的截取方式。如果设置了maxLines,则文本最多显示到指定的行,多余的文本可以通过textOverflow来指定截取方式。

Text('Hello, OpenHarmony, Hello, OpenHarmony').maxLines(1) // 最大显示1行.textOverflow({overflow: TextOverflow.Ellipsis}); // 超出部分显示省略号

fontSize、fontColor、fontStyle和fontWeight属性

这些属性分别用于设置文本的大小、颜色、样式和粗细。可以组合使用这些属性来设置文本的富文本样式。

Text('Bold and large text').fontSize(20) // 设置字体大小.fontColor(Color.Red) // 设置字体颜色.fontWeight(FontWeight.Bold); // 设置字体为粗体

fontFamily属性

fontFamily属性用于设置字体列表。默认字体为'HarmonyOS Sans',应用当前支持'HarmonyOS Sans'字体和注册自定义字体。

Text('Custom font family').fontFamily('HarmonyOS Sans'); // 设置字体为HarmonyOS Sans

lineHeight属性

lineHeight属性用于设置文本的行高。设置值不大于0时,不限制文本行高,自适应字体大小。

Text('Line height example').lineHeight(24); // 设置行高为24

letterSpacing属性

letterSpacing属性用于设置文本字符间距。设置该值为百分比时,按默认值显示。设置该值为0时,按默认值显示。

Text('Letter spacing example').letterSpacing(2); // 设置字符间距为2

decoration属性

decoration属性用于设置文本装饰线类型样式及其颜色。

Text('Text decoration example').decoration({type: TextDecorationType.Underline, // 下划线color: Color.Blue, // 装饰线颜色为蓝色style: TextDecorationStyle.Dashed // 装饰线样式为虚线});

示例代码

以下是一个ArkTS文本组件通用属性的完整示例:

@Entry
@Component
struct TextExample {build() {Column() {Text('Hello, OpenHarmony').width('100%').textAlign(TextAlign.Center).fontSize(16).fontColor(Color.Black).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis});Text('Bold and large text').fontSize(20).fontWeight(FontWeight.Bold);Text('Custom font family').fontFamily('HarmonyOS Sans');Text('Line height example').lineHeight(24);Text('Letter spacing example').letterSpacing(2);Text('Text decoration example').decoration({type: TextDecorationType.Underline,color: Color.Blue,style: TextDecorationStyle.Dashed});}.width('100%').height('100%').padding(20);}
}

在这个示例中,我们创建了一个包含多种文本样式的列容器。通过设置不同的文本通用属性,我们可以轻松地为文本组件添加各种视觉效果。

结语

通过本文的介绍,你应该对HarmonyOS 5.0中ArkTS组件的文本通用属性有了基本的了解。这些属性是UI开发中的重要工具,合理利用这些属性可以使你的应用界面更加美观和实用。希望本文能够帮助你在开发过程中更好地利用ArkTS的文本通用属性。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

10款PDF合并工具的使用体验与推荐!!!

在如今的信息洪流中,我们几乎每个人都被淹没在大量的数字文档之中。无论是学生、教师还是职场人士,我们都需要高效地管理和处理这些文档。而PDF文件,凭借其跨平台的稳定性和通用性,成了最常用的文档格式之一。我们经常需要处理、编…

匿名管道 Linux

目录 管道 pipe创建一个管道 让子进程写入,父进程读取 如何把消息发送/写入给父进程 父进程该怎么读取呢 管道本质 结论:管道的特征: 测试管道大小 写端退了,测试结果 测试子进程一直写,父进程读一会就退出 …

【stablediffusion又出王炸】IC-Light,可以操控图像生成时的光照,光照难题终于被解决了!

IC-Light代表Impose Constant Light,是一个控制图像照明的项目。可以操控图像生成时的光照,对内容主体重新打光生成符合新背景环境光照的图片。这下商品图合成这种需要最大程度保持原有主体 ID 需求的最大的问题解决了。 Controlnet, Layerdiffusion, IC-light… …

HTML文本标签学习记录

HTML:HyperText Markup Language(超文本标志语言) HTML结构&#xff1a; 一个文档声明&#xff1a;<!DOCTYPE html>表示这是一个HTML页面 一个html标签对&#xff1a;<html></html>作用是告诉浏览器&#xff0c;这个页面是从<html>开始&#xff0c;…

Vmware安装macos虚拟机

解锁虚拟机安装 maOS 限制 下载工具包 https://github.com/DrDonk/unlocker解压进入文件夹unlocker.exe 以管理员身份运行win-install.bat 以管理员身份运行 Vmware创建虚拟机 虚拟机配置设置 选择类型 镜像选择 系统选择 存储路径设置 启动虚拟机实例 选择语言 磁盘管…

机器学习-4:机器学习的建模流程

机器学习的建模流程 流程为&#xff1a; 原始数据 --> 数据预处理 --> 特征工程 --> 建模 --> 验证。 原始数据收集 所有AI或机器学习的基础就是数据&#xff0c;没有数据就什么都做不了&#xff0c;在搭建一个系统之前首要考虑的就是有没有足够多的数据可以支撑这…

【原创】java+ssm+mysql美食论坛网系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

RHEL 网络配置(Linux网络服务器 09)

0 引入 对于Linux系统的网络管理员来说&#xff0c;掌握Linux服务器的网络配置是至关重要的&#xff0c;同时管理远程主机也是网络管理员必须掌握的。这些是后续网络服务配置的基础。 本文&#xff0c;我们讲解如何使用nmtui命令配置网络参数&#xff0c;以及通过nmtui命令查…

新增支持Elasticsearch数据源,支持自定义在线地图风格,DataEase开源BI工具v2.10.2 LTS发布

2024年11月11日&#xff0c;人人可用的开源BI工具DataEase正式发布v2.10.2 LTS版本。 这一版本的功能变动包括&#xff1a;数据源方面&#xff0c;新增了对Elasticsearch数据源的支持&#xff1b;图表方面&#xff0c;对地图类和表格类图表进行了功能增强和优化&#xff0c;增…

selenium自动化测试框架

一、Selenium自动化测试&#xff08;基于python&#xff09; 1、Selenium简介&#xff1a; 1.1 Selenium是一款主要用于Web应用程序自动化测试的工具集合。Selenium测试直接运行在浏览器中&#xff0c;本质是通过驱动浏览器&#xff0c;模拟浏览器的操作&#xff0c;比如跳转…

C++中级学习笔记

1.内存分区模型&#xff1a; C程序在执行时&#xff0c;将内存大方向划分为四个区域 &#xff08;1&#xff09;代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统进行管理 &#xff08;2&#xff09;全局区&#xff1a;存放全局变量和静态变量以及变量 &am…

基于深度卷积二元分解网络的齿轮和轴承故障特征提取方法

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

Qml-Timeline的使用

Qml-Timeline的使用 Timeline的概述 Timeline&#xff1a;根据关键帧及其缓和曲线指定项目的值属性currentFrame : double&#xff1a;当前帧 属性enabled : bool&#xff1a;是否使能时间线 属性endFrame : double&#xff1a;结束帧值 属性startFrame : double&#xff1a;…

Vue指令详解——以若依框架中封装指令为例分析

自定义指令 在Vue.js中&#xff0c;自定义指令提供了一种非常灵活的方式来扩展Vue的功能。以下是对Vue中自定义指令的详细解释&#xff1a; 一、自定义指令的基本概念 自定义指令允许开发者直接对DOM元素进行低层次操作&#xff0c;而无需编写大量的模板或者JavaScript代码。…

基于微信小程序的大学生心理健康测评系统设计与实现,LW+源码+讲解

摘 要 随着移动互联网的发展&#xff0c;理论和技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性…

一步到位:用Python实现PC屏幕截图并自动发送邮件,实现屏幕监控

软件测试资料领取&#xff1a;[内部资源] 想拿年薪40W的软件测试人员&#xff0c;这份资料必须领取~ 软件测试面试刷题工具&#xff1a;软件测试面试刷题【800道面试题答案免费刷】 在当前的数字化世界中&#xff0c;自动化已经成为我们日常生活和工作中的关键部分。它不仅提…

jwt用户登录,网关给微服务传递用户信息,以及微服务间feign调用传递用户信息

1、引入jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency> 2、Jwt工具类&#xff0c;生成token以及解析token package com.niuniu.gateway.uti…

基于Multisim数字电子秒表计时器电路(含仿真和报告)

【全套资料.zip】数字电子秒表电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 数字电子秒表电路 1.秒表由3个显示器显示&#xff0c;其中显示分辩率为1s&#xff0c;计时范围是6分59…

手把手教你30秒下载Typora通用版(mac、win适用)

话不多说&#xff01; 1、去官网选择mac版本下载安装&#xff1a; typora下载 然后打开 typora 包内容找到 / Applications / Typora . app / Contents / Resources / TypeMark / 用编辑器打开上面文件夹&#xff0c; vscode 示例&#xff1a; 找到 page - dist / static / …

鸿蒙ZRouter动态路由框架—生命周期管理能力

文章目录 基本使用(单个页面生命周期&#xff09;页面的全局生命周期监听工作流程图源码 ZRouter从1.1.0版本开始支持生命周期函数管理能力&#xff0c;主要有以下特点&#xff1a; 不影响你原有的生命周期业务逻辑&#xff0c;对NavDestination页面保持着零侵入性&#xff0c;…