HarmonyOS 中的 Text 和 Span 组件使用详解

本文将全面解析 HarmonyOS 中用于显示文本内容的 Text 和 Span 组件，涵盖其基础用法、常见场景以及进阶操作。

Text 和 Span 组件简介
Text 组件：用于展示整体文本内容，例如文章段落。
Span 组件：用于行内文本显示，必须嵌套在 Text 或 RichEditor 中使用。
Text 组件创建
2.1 使用字符串创建

Text('我是一段文本');

2.2 使用资源引用创建
资源文件路径：/resources/base/element/string.json

Text($r('app.string.module_desc'))
  .baselineOffset(0)
  .fontSize(30)
  .border({ width: 1 })
  .padding(10)
  .width(300);

添加 Span 子组件
3.1 创建 Span 子组件
Span 需要嵌套在 Text 中，且其内容会覆盖 Text 的默认文本。

Text('我是Text') {
  Span('我是Span');
}
.padding(10)
.borderWidth(1);

3.2 设置文本装饰线及颜色
通过 decoration 属性添加装饰线。

Text() {
  Span('删除线文本').decoration({ type: TextDecorationType.LineThrough, color: Color.Red });
  Span('下划线文本').decoration({ type: TextDecorationType.Underline, color: Color.Blue });
}
.borderWidth(1)
.padding(10);

文本样式设置
4.1 对齐方式
通过 textAlign 属性设置文本对齐。

Text('左对齐').textAlign(TextAlign.Start);
Text('中间对齐').textAlign(TextAlign.Center);
Text('右对齐').textAlign(TextAlign.End);

4.2 超长文本处理
通过 textOverflow 属性控制文本溢出显示效果。

Text('超长文本').textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1);

4.3 字体大小自适应
通过 minFontSize 和 maxFontSize 设置字体大小范围。

Text('自适应字体').maxFontSize(30).minFontSize(5).width(250).maxLines(1);

4.4 大小写控制
通过 textCase 设置文本大小写。

Text('全大写').textCase(TextCase.UpperCase);
Text('全小写').textCase(TextCase.LowerCase);

文本事件
5.1 Span 点击事件
Span 支持 onClick 点击事件。

Text() {
  Span('点击我').onClick(() => {
    console.info('Span 被点击');
  });
}

5.2 Text 点击事件

Text('点击事件').onClick(() => {
  console.info('Text 被点击');
});

综合场景示例
以下代码实现了类似“热搜榜”的效果：

@Entry
@Component
struct TextExample {
  build() {
    Column() {
      Row() {
        Text("1").fontColor(Color.Red);
        Text("热搜词条1").maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis });
        Text("爆").backgroundColor(Color.Red).borderRadius(5);
      }
      Row() {
        Text("2").fontColor(Color.Orange);
        Text("热搜词条2 热搜词条2 热搜词条2").maxLines(1).constraintSize({ maxWidth: 200 });
      }
    }
  }
}

通过本文的解析，您将更高效地使用 HarmonyOS 中的 Text 和 Span 组件，打造丰富的文本展示效果。

HarmonyOS 中的 Text 和 Span 组件使用详解

悦读