鸿蒙Next开发中如何在text中展示不同大小和颜色的文字

在鸿蒙Next开发中，我想在一个Text组件内同时显示不同大小和颜色的文字，应该怎么实现？比如需要在一行文字中让部分关键词变大或变色，类似于富文本效果。求具体实现方法或示例代码！

2 回复

在鸿蒙Next中，用Text组件结合Span组件就能轻松搞定！比如：

Text() {
  Span('大号红色').fontSize(20).fontColor(Color.Red)
  Span('小号蓝色').fontSize(12).fontColor(Color.Blue)
}

简单说就是：一个Text里塞多个Span，每个Span单独设置样式，完美实现文字变色变大小！

更多关于鸿蒙Next开发中如何在text中展示不同大小和颜色的文字的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过Text组件的Span子组件来展示不同大小和颜色的文字。以下是实现方法：

核心代码示例

import { Text, Span } from '@kit.ArkUI';

@Entry
@Component
struct TextStyleExample {
  build() {
    Column() {
      Text() {
        Span('红色大文字')
          .fontSize(30)
          .fontColor(Color.Red)
        
        Span(' 普通黑色文字 ')
          .fontSize(20)
          .fontColor(Color.Black)
        
        Span('蓝色小文字')
          .fontSize(16)
          .fontColor(Color.Blue)
      }
    }
    .width('100%')
    .padding(20)
  }
}

关键属性说明

  1. fontSize() - 设置文字大小（单位：vp）
  2. fontColor() - 设置文字颜色（使用Color预定义值或十六进制颜色值）
  3. 多个Span会按照添加顺序在同一行显示，需要换行时可使用多个Text组件

扩展用法

// 自定义颜色
Span('自定义颜色')
  .fontColor('#FFA500')
  .fontSize(25)

// 组合样式
Span('粗体斜体')
  .fontSize(18)
  .fontColor(Color.Green)
  .fontWeight(FontWeight.Bold)
  .fontStyle(FontStyle.Italic)

通过Span组件可以灵活控制文本片段样式，实现丰富的文字展示效果。

回到顶部