当前位置：首页 > article >正文

探索 HarmonyOS 中的高级文本自定义

article 2024/9/25 9:36:31

在本篇博文中，我们将深入探讨TextHarmonyOS 中的组件，探索允许进行广泛自定义的高级功能。无论您是创建动态用户界面还是仅显示格式化的文本，了解这些选项都会增强您的应用的呈现效果。

创建文本组件

该Text组件是 HarmonyOS 中显示文本内容的基础。它可以使用字符串或资源引用来创建，为静态和动态内容提供灵活性。

1. 使用字符串

这是创建Text组件的最简单方法：

Text('Welcome to HarmonyOS')
  .fontSize(20)
  .fontColor(Color.Black)
  .padding(10)

2. 使用资源引用

对于本地化应用程序，您可以使用资源引用从外部 JSON 文件加载文本：

Text($r('app.string.welcome_message'))
  .fontSize(20)
  .fontColor(Color.Black)
  .padding(10)

使用 Span 增强文本

Span组件可用于在单个Text组件内显示多段文本，从而允许更复杂的格式。

Text() {
  Span('This is ').fontColor(Color.Black)
  Span('bold').fontWeight(FontWeight.Bold).fontColor(Color.Red)
  Span(' text.').fontColor(Color.Black)
}
.padding(10)

在此示例中，“粗体”一词以不同的颜色和粗细突出显示，展示了如何Span使用组件来增强文本。

高级文本装饰

1. 文本装饰

您可以对文本应用各种装饰，例如下划线、上划线和删除线。

Text('Underlined Text')
  .decoration({
    type: TextDecorationType.Underline,
    color: Color.Blue
  })
  .padding(10)

2. 文本大小写转换

HarmonyOS 允许动态转换文本大小写：

Text('this is lowercase')
  .textCase(TextCase.UpperCase)
  .padding(10)

3. 文本对齐

控制文本对齐对于响应式设计至关重要。以下是将文本对齐到不同位置的方法：

Text('Center Aligned Text')
  .textAlign(TextAlign.Center)
  .width(300)
  .padding(10)

处理溢出和省略号

长文本通常需要特殊处理才能适合指定空间。HarmonyOS 提供了剪切、显示省略号甚至在文本溢出时滚动文本的选项。

Text('This is a very long text that might not fit in a single line.')
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .maxLines(1)
  .width(250)
  .padding(10)

交互式文本：添加事件

文本组件可以响应用户交互，使其更加动态。以下是添加点击事件的示例：

Text('Click Me')
  .onClick(() => {
    console.info('Text clicked!');
  })
  .padding(10)

自定义行高和间距

您还可以控制行高和字符之间的间距来微调文本的外观。

Text('This is text with custom line height.')
  .lineHeight(20)
  .letterSpacing(2)
  .padding(10)

实例：实现搜索结果列表

以下是讨论的概念的实际实现。我们将创建一个带有突出显示关键字的简单搜索结果列表。

@Entry
@Component
struct SearchResultList {
  build() {
    Column() {
      Row() {
        Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("HarmonyOS Overview")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("NEW")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .backgroundColor(Color.Green)
          .borderRadius(5)
          .width(30)
          .height(14)
      }.width('100%').margin(5)

      Row() {
        Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
        Text("Advanced Text Customization in HarmonyOS")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text("HOT")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .backgroundColor(Color.Orange)
          .borderRadius(5)
          .width(30)
          .height(14)
      }.width('100%').margin(5)
    }.width('100%')
  }
}

在此示例中，搜索结果列表使用颜色和背景样式突出显示新主题和热门主题。文本溢出时，使用省略号进行裁剪，以便更好地呈现。