【鸿蒙应用开发基础】常用组件Text

对于新手开发者来说，了解并掌握鸿蒙常用组件的使用方法是开启鸿蒙应用开发之旅的重要一步。

在本文中，我们将为你介绍一些常用的鸿蒙组件，以及如何使用它们来构建出色的用户界面。通过学习和实践这些组件，你将能够创建出美观、直观且易于使用的应用程序。

在本章中，我们将向你展示如何使用 Text 组件在界面上显示一段文本信息。你还将学习如何设置文本的样式、字体、颜色和对齐方式。这可以帮助你创建出更加丰富多样的用户界面。

创建新项目

首先，打开鸿蒙开发者工具（DevEco Studio ）,并选择需要的 Ability 工程模板，创建一个新的 ArkUI 项目。单击Next按钮，如下图所示。

进入下一个界面，填写工程相关信息，主要选择Compile SDK ，Language 和Device Type ，其他保持默认值即可，单击Finish按钮，如下图所示。

工程创建完成后，DevEco Studio 会加载index.ets文件并显示预览画布。如下图所示。

创建 Text 组件

在 pages 目录下的Index.ets 文件中生成的示例代码向你展示了如何显示一段文本信息。接下来让我们先来关注一下Text组件的用法。

要在屏幕上显示文本，你可以初始化Text对象并将要显示的文本传递给它。代码如下：

scss 复制代码

Text("遥遥领先")

预览画布会显示遥遥领先。这是创建文本组件的基本语法。你可以自由地将文本更改为你想要的任何值，画布应该会立即向你显示更改。如下图所示。

设置 Text 组件样式和属性

添加文本样式

在 ArkUI 中，你可以通过使用属性来更改组件的样式。例如，你想将文本加粗。你可以使用属性fontWeight 并指定你喜欢的字体粗细（例如FontWeight.Bold），代码如下：

scss 复制代码

Text('遥遥领先').fontWeight(FontWeight.Bold)

其中，Bold 是FontWeight 中的枚举值，你可以使用点语法来访问。例如，在FontWeight 输入一个点时，你将看到各种字体粗细的选项。你可以选择Bold来加粗字体。如下图所示。

设置文本的字体粗细，还支持 number 类型的值，取值为[100,900]，取值间隔为 100，取值越大，字体越粗。

如果你想让文本变大一点，你可以使用属性fontSize，代码如下:

scss 复制代码

Text("遥遥领先").fontWeight(FontWeight.Bold).fontSize(30)

在代码中，我们设置字体的大小为 30 ，单位为fp。如下图所示。

我们还可以通过使用属性fontStyle来指定字体样式。例如，将文本显示为斜体，代码如下:

scss 复制代码

Text("遥遥领先").fontWeight(FontWeight.Bold).fontSize(30).fontStyle(FontStyle.Italic)

预览画布中，文本的字体样式会更改并显示斜体的效果。如下图所示。

接下来，让我们更改字体颜色。

我们可以使用fontColor属性，代码如下:

scss 复制代码

Text("遥遥领先").fontWeight(FontWeight.Bold).fontSize(30).fontColor(Color.Green)

fontColor 属性参数类型为 ResourceColor。这里我们指定为绿色，你可以使用其他的值，如 0xffffff，#ff000000 等。如下图所示。

添加装饰线样式

使用decoration 属性设置文本装饰线及其颜色，decoration 属性包含type 和color 两个参数，其中 type 用于设置装饰线样式，参数类型为 TextDecorationType，color 为可选参数，用来设置装饰线的颜色。在下面的示例中给文本设置了删除线，删除线的颜色为红色。代码如下:

php 复制代码

Text("遥遥领先").decoration({type: TextDecorationType.LineThrough,color: Color.Red})

其中，TextDecorationType包含以下几种类型:

None：不使用文本装饰线
Overline：文字上划线修饰
LineThrough：穿过文本的修饰线
Underline：文字下划线修饰

效果图如下。

设置透明度

在 ArkUI 的通用属性中提供了一个opacity 属性，你可以使用该属性来设置控件的透明度。传递一个介于 0 和 1 之间的值来设置控件的透明度。1 表示不透明，0表示完全透明。代码如下:

scss 复制代码

.opacity(0.3)

例如，如果将 opacity 属性应用于 Text 组件并将其值设置为 0.3，则 Text 组件将变为部分透明的。如下图所示。

使用多行文本

默认情况下，文字支持多行显示，让 Text 组件显示一段长文本，代码如下:

vbnet 复制代码

Text('2019年8月9日，华为在东莞举行华为开发者大会，正式发布操作系统HarmonyOS。HarmonyOS是一款全场景分布式OS，' +
'可按需扩展，实现更广泛的系统安全，主要用于物联网，特点是低时延。HarmonyOS实现了模块化耦合，对应不同设备可弹性部署，' +
'它有三层架构：第一层是内核，第二层是基础服务，第三层是程序框架。2019年8月10日，荣耀正式发布荣耀智慧屏、荣耀智慧屏Pro，搭载了鸿蒙操作系统。')

我们在 Text 组件中显示一段长文本，在预览画布中将呈现一个多行文本。如下图所示。

如果要让文本居中对齐，可以使用textAlign属性，并将其值设置为 TextAlign.Center，代码如下:

scss 复制代码

.textAlign(TextAlign.Center)

在某些情况下，我们希望将行数限制为某个特定数。你可以使用maxLines属性来控制它。代码如下:

scss 复制代码

.maxLines(3)

我们可以配合textOverflow 属性，指定在 Text 组件中截断的文本的位置。只支持在文本的末尾进行截断。默认情况下，在文本的尾部截断，其属性的值为TextOverflow.Clip。代码如下:

css 复制代码

.textOverflow({overflow: TextOverflow.Clip})

要修改文本的截断方式，例如超出的内容展示省略号。可以使用 textOverflow 属性，并将其值设置为 TextOverflow.Ellipsis。效果如下图所示。

设置填充和间距

在 Text 组件中，默认的行间距对于大多数情况来说已经足够了，如果要更改默认设置，你可以使用letterSpacing属性来调整行间距。代码如下:

scss 复制代码

.letterSpacing(4)

我们可以使用padding属性为文本的每一侧添加一些额外的空间，代码如下:

scss 复制代码

 .padding(6)

现在，预览画布的效果，如下图所示。

设置文本是否可复制和粘贴

默认情况下，长按 Text 组件不会弹出文本选择菜单，你可以使用copyOption属性来设置文本是否可复制粘贴，默认值为 CopyOptions.None。设置 copyOption 为 CopyOptions.InApp 或者 CopyOptions.LocalDevice，长按文本会弹出文本选择菜单，可选中文本并进行复制，全选操作。代码如下:

scss 复制代码

.copyOption(CopyOptions.InApp)

现在，我们长按文本会弹出文本选择菜单，效果如下如所示。

Text 组件支持 Span 子组件

Text 组件还可以包含Span 子组件，需要注意的是，在使用Span 子组件时，Text 组件内不能存在文本内容。若存在，只会显示子组件Span中的内容。相关代码如下所示。

总结

Text 组件是鸿蒙ArkUI 中最基本、最常用的组件之一，它可以帮助你在应用程序中展示各种类型的文本信息。通过学习Text 组件的用法，你可以在鸿蒙ArkUI中轻松地展示各种类型的文本信息。