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

简介: 在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。

在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的文本通用属性。
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143724484

目录
相关文章
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
568 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
502 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
895 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
258 0
|
8月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
7月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
8月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
293 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
8月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。

热门文章

最新文章