在这篇文章中，将逐步的介绍，如何通过Span、ImageSpan、SymbolSpan、ContainerSpan设置简单文本样式。

一、Span、ImageSpan、SymbolSpan、ContainerSpan的能力比较

组件	能力说明
Span	插入文本，并且具有Text的部分能力
SymbolSpan	插入图标，并且具有SymbolGlyph的部分能力
ImageSpan	插入图片，支持Image的部分能力
ContainerSpan	Span、ImageSpan的容器，支持设置文本背景样式

四个组件之间区别分明。看完图表，自然产生疑问，Span只有Text一部分能力，ImageSpan只有Image的部分能力，为什么使用Span而不是Text？为什么使用ImageSpan而不是Image呢？
首先，Span、ImageSpan、SymbolSpan、ContainerSpan，都需要挂载到Text下，才能显示到屏幕上。
其次，Text下挂载多个Span、ImageSpan、SymbolSpan达成的效果，换成容器组件下挂载Text、Image、SymbolGlyph，也可以达成一样的效果。
之所以提供这几个名称中包含Span的组件，是为了让开发可以用少量代码，就可以完成字符样式修改、图文混排的效果，从而提高开发效率。

二、Span使用介绍

Span支持设置fontColor、fontSize、fontStyle等接口，接口用法与Text一致。Span不支持通用属性，无法设置边框、组件标识。Span对通用属性的支持也有限，只支持onClick和onHover。这些不支持的接口，都需要设置给父组件Text。

Span可以作为Text和Container的子节点，并设置文本样式。这里只介绍作为Text子节点的用法。以fontColor和fontSize接口为例，介绍如何给一段文本的不同部分，设置不同的颜色和字号。

Step1 创建Text组件

Text下挂载子节点时，content参数的设置字符串实际不会显示。因此无需给Text设置content入参。

Text()
    .fontSize(20)
    .fontColor(Color.Black)
    .fontStyle(FontStyle.Italic)

Step2 添加Span子组件

如果Span没有设置属性且父组件设置属性，则继承父组件设置的属性。此时多个Span子组件会以横向布局的方式显示。每个Span的fontSize、fontColor、.fontStyle都继承了父组件的设置。

Text() {
    Span("这是Span1，准备改成红色")
    Span("这是Span2，准备改成绿色")
    Span("这是Span3，字号准备改成50")
}
.fontSize(20)
.fontColor(Color.Black)
.fontStyle(FontStyle.Italic)

Step3 设置Span字体样式

此时，设置了fontSize的Span和父组件Text的fontSize不同；设置fontColor的Span和父组件Text的fontColor不同。其他没有单独设置的属性，仍然是继承Text设置的属性。

Text() {
    Span("这是Span1，准备改成红色")
        .fontColor(Color.Red)
    Span("这是Span2，准备改成绿色")
        .fontColor(Color.Green)
    Span("这是Span3，字号准备改成50")
        .fontSize(50)
}
.fontSize(20)
.fontColor(Color.Black)
.fontStyle(FontStyle.Italic)

step4 想要改变布局，第三个Span另起一行，增加间距。

换行可以通过添加换行符"\n"解决。但是如何增加间距？前文已经说明，Span不支持通用属性，不能直接通过margin设置间距。因此，需要将Span3放在另一个Text中，给Text设置margin，实现间距。

Column() {
    Text() {
        Span("这是Span1，准备改成红色")
            .fontColor(Color.Red)
        Span("这是Span2，准备改成绿色")
            .fontColor(Color.Green)
    }
    .fontSize(20)
    .fontColor(Color.Black)
    .fontStyle(FontStyle.Italic)

    Text() {
        Span("这是Span3，字号准备改成50")
            .fontSize(50)
    }
    .fontSize(20)
    .fontColor(Color.Black)
    .fontStyle(FontStyle.Italic)
    .margin({top:100})
}

最终效果如下：

三、ImageSpan使用介绍

ImageSpan是Text的子组件，用来展示图片。和Span稍有不同，ImageSpan支持通用属性和通用事件。

这里举例说明如何完成一个简单的图文混排。

Step1 创建Text组件、添加Span子组件

Text() {
    Span("这是Span1")
    Span("这是Span2")
}

Step2 添加ImageSpan子组件

ImageSpan没有任何约束，按照实际大小展示。

Text() {
    Span("这是Span1")
    ImageSpan($r('app.media.startIcon')) 
        // 图片资源需要自行添加到 src/main/resources/base/media/startIcon.png
    Span("这是Span2")
}

Step3 ImageSpan添加布局约束

ImageSpan支持通用属性，因此可以添加布局约束，直接设置height、width，不需要借助Text完成。

Text() {
    Span("这是Span1")
    ImageSpan($r('app.media.startIcon'))
        .height(50)
        .width(50)
        .margin({ left: 20, right: 20 })
        .borderWidth(1)
    Span("这是Span2")
}

Step4 想让文本和图片居中对齐

垂直居中需要通过baseLineOffset属性设置，需要自行调整偏移量。

import { LengthMetrics } from '@kit.ArkUI'

@Entry
@Component
struct demo {
  build() {
    Column({ space: 20 }) {
      Text() {
        Span("用了baselineOffset")
        ImageSpan($r('app.media.startIcon'))
          .height(50)
          .width(50)
          .margin({ left: 20, right: 20 })
          .borderWidth(1)
          .baselineOffset(LengthMetrics.vp(-20))
      }
      .borderWidth({ bottom: 1 })

      Text() {
        Span("没用baselineOffset")
        ImageSpan($r('app.media.startIcon'))
          .height(50)
          .width(50)
          .margin({ left: 20, right: 20 })
          .borderWidth(1)
      }
      .borderWidth({ bottom: 1 })

    }.padding(20)
  }
}

最终效果如下：

四、SymbolSpan使用介绍

SymbolSpan是Text的子组件，用来展示图标。作为Text子组件的好处是可以非常方便地和文字混排。如果使用SymbolGlyph，在图标和文字混排时，需要自行布局，在字号可变时布局非常困难。

SymbolSpan和Span的用法类似，SymbolSpan继承了SymbolGlyph的部分能力。这里不展开赘述，贴一个官方文档的demo，示例1（设置渲染和动效策略），读者可以自行尝试。

五、ContainerSpan 使用介绍
ContainerSpan是Text组件的子组件，子组件可以添加一个或多个Span、ImageSpan，但是不能添加SymbolSpan。

目前只有一个功能，就是给多个Span、ImageSpan设置文本背景色。贴上一个官方文档的demo，示例1（设置背景样式），读者可以自行尝试。