ArkUI魔法文本秀：自定义样式全解析

textAlign 属性就像是一个神奇的指挥家，专门负责设置文本在其容器中的水平对齐方式。它有三个得力助手：TextAlign.Start（左对齐）、TextAlign.Center（居中对齐）和 TextAlign.End（右对齐）。在电商应用的商品列表页面，商品名称左对齐，方便用户快速浏览；价格信息右对齐，突出显示且符合人们的阅读习惯。以下是一段简单的代码示例，让我们直观感受一下它的魔力：@E

大雨淅淅1999

853人浏览 · 2025-06-14 22:31:44

大雨淅淅1999 · 2025-06-14 22:31:44 发布

（二）溢出处理奥秘：textOverflow

（三）行高的秘密：lineHeight

（四）装饰线魔法：decoration

（五）基线偏移魔法：baselineOffset

（六）字符间距魔法：letterSpacing

（七）字体大小魔法：minFontSize 与 maxFontSize

一、ArkUI 初相识

在当今数字化时代，用户界面（UI）的设计与开发对于应用程序的成功至关重要。ArkUI 作为 HarmonyOS 官方原生框架，一套声明式 UI 开发框架，正逐渐在应用开发领域崭露头角。它使用 ArkTS 作为开发语言，为开发者提供了简洁自然的声明式语法、组件化机制以及数据 - UI 自动关联等强大能力，实现了贴近自然语言、书写效率更高的编程方式。

ArkUI 广泛应用于 HarmonyOS 系统的各类应用开发中，从手机应用到智能穿戴设备、智能家居中控等，其身影无处不在。在智能手表应用开发里，通过 ArkUI 可以打造出简洁直观、交互流畅的表盘和应用界面，充分利用手表有限的屏幕空间，为用户提供便捷的操作体验；智能家居中控应用中，ArkUI 助力构建出可视化、操作便捷的家居控制界面，用户可以轻松通过手机或平板等设备，对家中的灯光、电器等进行远程控制。

在 UI 设计中，文本作为传递信息的重要载体，其样式的呈现直接影响着用户对应用的第一印象和使用体验。合适的文本样式能够增强信息的可读性，引导用户的视线，突出关键内容，从而提升整个界面的美观度和可用性。比如电商应用的商品详情页，标题文本使用较大字号和醒目的颜色，能够迅速吸引用户注意力；而描述文本采用清晰简洁的字体和适中的行间距，则方便用户阅读商品信息。接下来，就让我们深入探索 ArkUI 中自定义文本样式的奥秘。

二、文本样式基础入门

（一）创建文本的魔法咒语

在 ArkUI 的奇妙世界里，创建文本就如同施展魔法一般简单。最基础的方式是使用 Text 组件，直接将文本内容作为参数传递进去，就能在界面上显示出普通文本。就像这样：

Text('Hello, ArkUI!')

这段代码会在界面上显示 “Hello, ArkUI!”，就像是在空白的画布上写下了第一笔。

而当我们需要引用 Resource 资源来创建文本时，就需要借助 $r 函数。首先，我们要在 /resources/base/element/string.json 文件中定义好资源内容，假设我们定义了如下内容：

{

"string": [

{

"name": "greeting",

"value": "欢迎来到自定义文本的世界"

}

]

}

然后在代码中通过以下方式引用：

Text($r('app.string.greeting'))

这样，界面上就会显示出我们在资源文件中定义的文本内容。这种方式在多语言支持、文本内容复用等场景下非常实用，就好比有了一个文本素材库，随时可以取用。

（二）Span 组件：文本中的小精灵

Span 组件就像是隐藏在文本中的小精灵，为我们的文本展示带来更多的灵活性。它只能作为 Text 组件的子组件存在，却有着独特的作用。比如，当我们需要在一段文本中突出显示某些关键词，或者让不同部分的文本拥有不同的样式时，Span 组件就派上用场了。

在产品说明书的文本展示中，可能需要将产品的关键特性用不同颜色或字体突出显示；在承诺书文本里，可能要对重要条款进行特殊标记。下面通过一个代码示例来看看它的神奇之处：

Text('') {

Span('这段文本中').fontColor(Color.Grey).fontSize(16)

Span('被突出的部分').fontColor(Color.Blue).fontSize(18).fontWeight(FontWeight.Bold)

Span('有着不一样的样式').fontColor(Color.Grey).fontSize(16)

}

.padding(10)

.borderWidth(1)

在这段代码中，我们创建了一个 Text 组件，其内部包含三个 Span 子组件。每个 Span 组件都设置了不同的字体颜色和大小，其中 “被突出的部分” 还设置了加粗字体。运行这段代码，你会看到文本中不同部分呈现出了不同的样式，就像给文本穿上了不同风格的外衣，让关键信息一目了然。

三、自定义样式大揭秘

（一）文本对齐魔法：textAlign

@Entry

@Component

struct Index {

build() {

Column() {

Text('左对齐').width(300).textAlign(TextAlign.Start).border({ width: 1 }).padding(10)

Text('中间对齐').width(300).textAlign(TextAlign.Center).border({ width: 1 }).padding(10)

Text('右对齐').width(300).textAlign(TextAlign.End).border({ width: 1 }).padding(10)

}.width('100%').height('100%')

}

运行这段代码，你会看到三行文本分别以左对齐、居中对齐和右对齐的方式呈现在界面上，就像士兵们按照不同的指令整齐排列。

（二）溢出处理奥秘：textOverflow

当文本内容较多，超出了 Text 组件的范围时，textOverflow 属性就派上用场了，它专门负责处理这些 “调皮” 的溢出文本。它需要和 maxLines 属性一起配合使用（默认情况下文本会自动折行）。textOverflow 有几个不同的处理策略：TextOverflow.None（不处理溢出，文本正常显示）、TextOverflow.Ellipsis（溢出部分显示为省略号）、TextOverflow.Clip（裁剪溢出部分）。在新闻应用的标题展示中，如果标题过长，使用省略号来表示溢出部分，既能节省空间，又能让用户大致了解标题内容。下面是一段代码示例，展示不同溢出处理效果：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is a very long text that will not be truncated when textOverflow is set to None. This is a very long text that will not be truncated when textOverflow is set to None.')

.width(250).textOverflow({ overflow: TextOverflow.None }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)

Text('This is a very long text that will be truncated with ellipses when textOverflow is set to Ellipsis. This is a very long text that will be truncated with ellipses when textOverflow is set to Ellipsis.')

.width(250).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)

Text('This is a very long text that will be clipped when textOverflow is set to Clip. This is a very long text that will be clipped when textOverflow is set to Clip.')

.width(250).textOverflow({ overflow: TextOverflow.Clip }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)

}.width('100%').height('100%')

}

通过这段代码，我们可以清晰地看到三种不同溢出处理方式下文本的显示效果，根据实际需求选择合适的处理方式，让文本展示更加美观和合理。

（三）行高的秘密：lineHeight

lineHeight 属性用于设置行高，也就是每行文本的高度。它可以应用于任何元素，包括块级元素、行内元素和表格单元。合适的行高能够改善文本的排版效果，使其更加美观和易读。在小说阅读应用中，设置合适的行高可以减少眼睛疲劳，提升阅读体验。行高的原理其实不难理解，浏览器会为每一段文本生成一个行框，行框的高度就是行高，行框由上间距、文本高度、下间距组成，且上间距和下间距相等，默认情况下文本在这一行中是垂直居中的。下面通过代码示例来看看不同行高设置对文本显示的影响：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is the text with the default line height. This is the text with the default line height.')

.width(300).fontSize(12).border({ width: 1 }).padding(10)

Text('This is the text with the line height set to 20. This is the text with the line height set to 20.')

.width(300).fontSize(12).border({ width: 1 }).padding(10).lineHeight(20)

}.width('100%').height('100%')

}

运行代码后，对比两段文本，你会发现设置了行高的文本，行与行之间的距离发生了变化，从而影响了整体的排版效果。

（四）装饰线魔法：decoration

decoration 属性主要用于设置文本装饰线样式及其颜色，让文本展现出不同的视觉效果。它包含两个重要参数：type 和 color，其中 type 用于设置装饰线样式，有 TextDecorationType.Underline（下划线）、TextDecorationType.LineThrough（删除线）、TextDecorationType.Overline（上划线）这几种类型；color 为可选参数，用来设置装饰线的颜色。在文档编辑应用中，我们可以为超链接文本添加下划线，提示用户这是可点击的链接；对于已完成的任务描述，使用删除线来标记，清晰展示任务状态。以下是代码示例：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is the text with an underline').decoration({ type: TextDecorationType.Underline, color: Color.Red })

.borderWidth(1).padding(10).margin(5)

Text('This is the text with a line-through').decoration({ type: TextDecorationType.LineThrough, color: Color.Blue })

.borderWidth(1).padding(10).margin(5)

Text('This is the text with an overline').decoration({ type: TextDecorationType.Overline, color: Color.Green })

.borderWidth(1).padding(10).margin(5)

}.width('100%').height('100%')

}

通过这段代码，我们可以看到三种不同装饰线样式和颜色的文本效果，根据具体场景和需求，为文本添加合适的装饰线，增强文本的表现力。

（五）基线偏移魔法：baselineOffset

baselineOffset 属性是用于控制行内元素基线位置的属性，它就像一个微调器，可以将元素相对于其父元素的基线位置向上或向下移动指定的距离，以满足垂直对齐的需求。在一些特殊的排版需求中，比如需要让某个符号或数字与文本的基线有一定的偏移，就可以使用这个属性。例如，在数学公式的显示中，一些上标或下标可能需要通过基线偏移来实现正确的排版。以下是代码示例展示基线上下偏移效果：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is the text content with baselineOffset 0.').baselineOffset(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

Text('This is the text content with baselineOffset 30.').baselineOffset(30) // 基线往上偏移

.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

Text('This is the text content with baselineOffset -20.').baselineOffset(-20) // 基线往下偏移

.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

}.width('100%').height('100%')

}

通过设置不同的 baselineOffset 值，我们可以清楚地看到文本基线位置的变化，从而灵活调整文本的垂直显示效果。

（六）字符间距魔法：letterSpacing

letterSpacing 属性用于设置文本字符间距，通过调整字符之间的距离，让文本呈现出不同的视觉效果。在一些需要突出个性或营造特殊氛围的设计中，经常会用到这个属性。比如在海报设计中，增大字符间距可以让标题更加醒目，吸引观众的注意力；在一些艺术字体的排版中，通过调整字符间距来实现独特的艺术效果。以下是代码示例展示不同字符间距设置的效果：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is the text content with letterSpacing 0.').letterSpacing(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

Text('This is the text content with letterSpacing 3.').letterSpacing(3) // 字符间距变大

.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

Text('This is the text content with letterSpacing -1.').letterSpacing(-1) // 字符间距变小

.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

}.width('100%').height('100%')

}

运行代码后，观察三段文本，你会发现字符间距的变化对文本整体风格产生了明显的影响，根据设计需求合理调整字符间距，为文本样式增添更多可能性。

（七）字体大小魔法：minFontSize 与 maxFontSize

minFontSize 和 maxFontSize 属性用于自适应字体大小，它们就像是两个守护者，共同协作确保文本在不同的显示环境下都能以合适的大小展示。minFontSize 用于设置文本的最小显示字号，maxFontSize 用于设置文本的最大显示字号。这两个属性必须同时设置才能生效，并且需要与 maxLines 属性或布局大小限制配合使用，单独设置任一属性将不会产生效果。在响应式设计中，当屏幕尺寸发生变化时，通过这两个属性可以保证文本大小在合理范围内自适应调整，不会出现过小或过大的情况，影响用户阅读。以下是使用代码示例：

@Entry

@Component

struct Index {

build() {

Column() {

Text('This is a long text that will adapt its font size according to the layout. This is a long text that will adapt its font size according to the layout.')

.width(200).minFontSize(12).maxFontSize(20).maxLines(3).fontColor(Color.Black).border({ width: 1 }).padding(10)

}.width('100%').height('100%')

}

在这个示例中，文本会根据设置的最小和最大字号，以及布局宽度和最大行数的限制，自动调整字体大小，以达到最佳的显示效果。

（八）文本大小写魔法：textCase

textCase 属性用于设置文本大小写，它可以让文本一直保持大写或者小写状态，非常方便快捷。在一些特定的场景下，比如导航栏的菜单选项、按钮上的文字等，统一的大小写样式可以让界面看起来更加整齐、规范。以下是代码示例展示大写和小写的转换效果：

@Entry

@Component

struct Index {

build() {

Column() {

Text() {

Span('i am lower - case text').fontSize(12).textCase(TextCase.LowerCase)

}.borderWidth(1).padding(10)

Text() {

Span('I AM UPPER - CASE TEXT').fontSize(12).textCase(TextCase.UpperCase)

}.borderWidth(1).padding(10)

}.width('100%').height('100%')

}

通过这段代码，我们可以看到原本正常大小写的文本，在设置 textCase 属性后，分别变成了小写和大写形式，根据界面设计的一致性需求，合理运用这个属性来规范文本的大小写显示。

（九）复制粘贴魔法：copyOption

copyOption 属性用于设置文本是否可复制粘贴，在一些需要保护文本内容版权或者不希望用户随意复制文本的场景中，这个属性就显得尤为重要；而在一些阅读类应用或需要用户方便复制文本内容的场景下，又需要将其设置为可复制。例如，在电子合同的展示页面，为了防止合同内容被随意复制传播，可能会将文本设置为不可复制；而在学习资料的阅读应用中，方便用户复制重要知识点进行整理学习。以下是设置为可复制的代码示例：

@Entry

@Component

struct Index {

build() {

Text('这是一段可复制文本').fontSize(30).copyOption(CopyOptions.InApp)

}

在这个示例中，通过设置 copyOption 为 CopyOptions.InApp，使得文本可以在应用内被复制，满足用户的特定操作需求，开发者可以根据实际应用场景灵活设置该属性。

四、综合案例展示

（一）案例场景设定

我们设定一个电商产品介绍页的场景，该页面展示一款智能手表。在这个页面中，标题需要以较大字号、醒目的颜色突出显示，吸引用户的注意力；产品的关键卖点，如 “超长续航”“健康监测功能丰富” 等，要用不同的颜色和图标进行区分展示，增强可读性；而产品的详细描述，包括尺寸、重量、材质等信息，则需要以清晰、简洁的排版呈现，方便用户快速获取信息。同时，对于一些促销信息，如 “限时折扣”“满减活动” 等，要用特殊的文本样式（如添加下划线、改变颜色）来突出显示，刺激用户购买欲望。

（二）实现步骤与代码解析

创建页面基本结构

首先，我们要创建一个基本的页面结构，包含产品图片、标题、关键卖点、详细描述和促销信息等部分。在 ArkUI 中，我们可以使用 Column 和 Row 组件来进行布局。

@Entry

@Component

struct ProductDetailPage {

build() {

Column() {

// 产品图片

Image($r('app.media.smartwatch_image'))

.width('100%')

.height(300)

.objectFit(ImageFit.Cover)

// 标题

Text('智能手表，开启健康生活新方式')

.fontSize(24)

.fontWeight(FontWeight.Bold)

.fontColor(Color.Blue)

.textAlign(TextAlign.Center)

.margin({ top: 10 })

// 关键卖点区域

Row() {

Column() {

Image($r('app.media.battery_icon'))

.width(30)

.height(30)

Text('超长续航')

.fontSize(16)

.fontColor(Color.Green)

}

Column() {

Image($r('app.media.health_icon'))

.width(30)

.height(30)

Text('健康监测丰富')

.fontSize(16)

.fontColor(Color.Orange)

}

}.justifyContent(FlexAlign.SpaceAround).margin({ top: 10 })

// 详细描述

Text('产品详细描述：这款智能手表采用[材质]，尺寸为[尺寸]，重量仅[重量]。它具备[列举其他功能]')

.fontSize(14)

.lineHeight(20)

.margin({ top: 10 })

// 促销信息

Text('限时折扣，立减50元！满100元减20元')

.fontSize(16)

.fontColor(Color.Red)

.decoration({ type: TextDecorationType.Underline, color: Color.Red })

.margin({ top: 10 })

}.width('100%').padding(10)

}

在这段代码中：

Image组件用于展示产品图片，设置了宽度为 100%，高度为 300，图片填充模式为ImageFit.Cover，以确保图片完整显示且适应容器大小。

标题Text组件设置了较大的字号 24、加粗字体、蓝色字体颜色，并居中对齐，使其在页面中突出显示。

关键卖点区域使用Row和Column组件组合布局，每个卖点都包含一个图标和对应的文字描述，通过设置不同的字体颜色来区分不同卖点。

详细描述Text组件设置了适中的字号 14 和行高 20，方便用户阅读。

促销信息Text组件设置了红色字体颜色和下划线装饰，突出显示促销内容。

优化文本样式细节

接下来，我们可以进一步优化文本样式细节，比如调整字符间距、设置文本溢出处理等。假设产品详细描述内容较多，我们需要对其进行溢出处理，同时为了让关键卖点文字更有个性，调整其字符间距。

@Entry

@Component

struct ProductDetailPage {

build() {

Column() {

// 产品图片

Image($r('app.media.smartwatch_image'))

.width('100%')

.height(300)

.objectFit(ImageFit.Cover)

// 标题

Text('智能手表，开启健康生活新方式')

.fontSize(24)

.fontWeight(FontWeight.Bold)

.fontColor(Color.Blue)

.textAlign(TextAlign.Center)

.margin({ top: 10 })

// 关键卖点区域

Row() {

Column() {

Image($r('app.media.battery_icon'))

.width(30)

.height(30)

Text('超长续航')

.fontSize(16)

.fontColor(Color.Green)

.letterSpacing(1)

}

Column() {

Image($r('app.media.health_icon'))

.width(30)

.height(30)

Text('健康监测丰富')

.fontSize(16)

.fontColor(Color.Orange)

.letterSpacing(1)

}

}.justifyContent(FlexAlign.SpaceAround).margin({ top: 10 })

// 详细描述

Text('产品详细描述：这款智能手表采用[材质]，尺寸为[尺寸]，重量仅[重量]。它具备[列举其他功能]，[这里是更多详细内容，可能会很长]')

.fontSize(14)

.lineHeight(20)

.margin({ top: 10 })

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(3)

// 促销信息

Text('限时折扣，立减50元！满100元减20元')

.fontSize(16)

.fontColor(Color.Red)

.decoration({ type: TextDecorationType.Underline, color: Color.Red })

.margin({ top: 10 })

}.width('100%').padding(10)

}

在这个优化后的代码中：

关键卖点的Text组件添加了letterSpacing(1)属性，增大了字符间距，使文字看起来更舒展，更具个性。

详细描述的Text组件添加了textOverflow({ overflow: TextOverflow.Ellipsis })和maxLines(3)属性，当文本内容超出 3 行时，溢出部分显示为省略号，保证页面布局的整洁和美观。

五、总结与展望

在探索 ArkUI 自定义文本样式的旅程中，我们深入了解了 ArkUI 作为 HarmonyOS 官方原生框架的重要性和广泛应用领域，认识到文本样式在 UI 设计中的关键作用。从基础入门的 Text 组件创建文本、Span 组件灵活展示部分文本样式，到自定义样式的各个属性，如 textAlign 控制文本对齐、textOverflow 处理溢出、lineHeight 设置行高、decoration 添加装饰线等，每个属性都为我们打造独特文本样式提供了有力工具。通过电商产品介绍页的综合案例，我们将这些知识应用到实际场景中，成功实现了吸引人的产品展示效果。

展望未来，随着 HarmonyOS 生态的不断发展壮大，ArkUI 在各类应用开发中的应用将更加广泛和深入。在实际项目中，无论是追求极致用户体验的移动应用，还是注重交互便捷性的智能穿戴设备应用，又或是强调可视化操作的智能家居中控应用，ArkUI 的自定义文本样式都将发挥重要作用，帮助开发者打造出更加美观、易用的界面。

现在，是时候将这些知识运用到实际项目中了。希望大家能够积极实践，不断探索 ArkUI 自定义文本样式的更多可能性，在 HarmonyOS 应用开发的道路上创造出更多优秀的作品。如果你在实践过程中有任何问题、心得或有趣的发现，欢迎在评论区留言分享，让我们一起交流进步！