ArkUI StyledString：把样式装进字符串，文字终于不散架

今天我们看 StyledString。它适合把文字、局部样式、段落规则，甚至图片附件，放进同一个字符串对象里管理。

如果只是几段静态文字，Text + Span 已经够用。StyledString 更适合内容本身需要带样式流转的场景，比如从编辑器拿到一段内容，再交给 Text 展示。

先准备一个 TextController

案例里先创建控制器：

private textController: TextController = new TextController();

然后把它交给 Text：

Text('', { controller: this.textController })

这样我们就能通过 setStyledString() 把带样式的字符串写进去。

把样式放进字符串

核心代码是这一段：

let styledText = new MutableStyledString('限时专栏：把样式装进字符串，标题、重点和段落规则可以一起交给 Text。', [
  {
    start: 0,
    length: 4,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: '#C2410C', fontWeight: 800 })
  }
])

start 和 length 决定样式作用在哪一段文字上。这里最容易写错的是范围：中文、标点、空格都算字符，改文案时要顺手检查一下范围。

图片也可以作为附件

案例里还追加了一个 ImageAttachment：

styledText.appendStyledString(new StyledString(new ImageAttachment({
  resourceValue: $r('app.media.startIcon'),
  size: { width: 18, height: 18 },
  verticalAlign: ImageSpanAlignment.CENTER,
  objectFit: ImageFit.Contain
})))

这不是编辑器，只是把图标当成字符串内容的一部分。读起来有点绕，但用起来很直接：最后调用 this.textController.setStyledString(styledText)。

你会在什么场景里用这种“带样式的字符串”？通知文案、搜索高亮、还是富文本预览？可以拿这个 Demo 改一段自己的文案试试。

完整代码

@Entry
@Component
struct ArkUIStyledStringDemo {
  private textController: TextController = new TextController();

  @Builder
  sectionTitle(title: string) {
    Text(title)
      .width('100%')
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#334155')
  }

  private applyStyledString() {
    let styledText = new MutableStyledString('限时专栏：把样式装进字符串，标题、重点和段落规则可以一起交给 Text。', [
      {
        start: 0,
        length: 4,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: '#C2410C', fontWeight: 800 })
      },
      {
        start: 5,
        length: 4,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: '#2563EB', fontWeight: 700 })
      },
      {
        start: 0,
        length: 34,
        styledKey: StyledStringKey.PARAGRAPH_STYLE,
        styledValue: new ParagraphStyle({ maxLines: 3, overflow: TextOverflow.Ellipsis })
      }
    ])

    styledText.appendStyledString(new StyledString(new ImageAttachment({
      resourceValue: $r('app.media.startIcon'),
      size: { width: 18, height: 18 },
      verticalAlign: ImageSpanAlignment.CENTER,
      objectFit: ImageFit.Contain
    })))

    styledText.appendStyledString(new StyledString(' 这个图标也是字符串内容的一部分。'))
    this.textController.setStyledString(styledText)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI StyledString')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('把样式装进字符串，文字终于不散架')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('StyledString 适合把文字内容、局部样式、段落规则和图片附件放在同一个数据对象里。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('普通 Text 对比')

          Text('如果只是几段静态文字，Text + Span 就够了。')
            .width('100%')
            .fontSize(15)
            .fontColor('#334155')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('StyledString 写入 Text')

          Text('', { controller: this.textController })
            .width('100%')
            .fontSize(15)
            .fontColor('#334155')
            .lineHeight(26)
            .onAppear(() => {
              this.applyStyledString()
            })

          Text('页面展示的是一个 MutableStyledString，里面包含 TextStyle、ParagraphStyle 和 ImageAttachment。')
            .width('100%')
            .fontSize(13)
            .fontColor('#64748B')
            .lineHeight(21)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('适合什么场景')

          Text('当富文本要在 Text、RichEditor 或其它支持属性字符串的组件之间迁移时，StyledString 比散落的 Span 更好管理。')
            .width('100%')
            .fontSize(15)
            .fontColor('#475569')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}