【ArkUI 文本展示系列】三：属性字符串简介，更丰富的文本效果

属性字符串指两个:StyledString 和 MutableStyledString，这两个组件拥有Span的所有的能力并且有所超出，并且可以非常方便地复用，给多个Text组件设置样式。

一、认识 StyledString、MutableStyledString

属性字符串的能力范围：设置文本样式，设置段落样式，设置超链接，设置手势事件，插入图片，插入自定义绘制，自定义存储。

类别	支持的功能
字符样式	字体样式、装饰线、基线偏移量、字符间距、行高、背景色
段落样式	对齐方式、首行缩进、段落缩进、最大行数、超长文本显示方式、断行规则、段落间距
超链接	设置超链接
手势事件	点击、长按、触摸事件
插入图片	图片的来源、尺寸、对齐方式、缩放类型、颜色滤镜
自定义绘制	插入自定义绘制内容
自定义存储	临时存储数据

上面这张表格，清晰描述了StyledString的主要功能，这些功能都可以在Text、Image、Gesture、Canvas中找到类似名称的接口。

MutableStyledString继承自StyledString，在设置Text样式方面的能力和StyledString是一样的。区别是， StyledString 需要在构造时就设计好样式，而 MutableStyledString 则可以在运行时动态修改样式，对样式进行增删改查。

二、StyledString使用介绍

下面介绍如何通过StyledString设置Text的样式。

step1. 创建Text对象，指定controller

为什么要指定controller？因为后面需要通过controller.setStyledString()来绑定属性字符串。

@Entry
@Component
struct demo {
  controller: TextController = new TextController()

  build() {
    Column() {
      Text(undefined, { controller: this.controller })
    }
  }
}

step2. 创建StyledString对象

  spanStyle1: SpanStyle = {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Green })
  };
  spanStyle2: SpanStyle = {
    start: 0,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Red })
  };
  arrayStyled:Array<StyleOptions>= [this.spanStyle1,this.spanStyle2]
  styledString: StyledString = new StyledString("运动45分钟",this.arrayStyled);
  

step3. Text绑定StyledString对象

绑定属性字符串的时机有许多约束条件。最简单的用法是在onPageShow这一生命周期阶段中绑定。

onPageShow(): void {
  this.controller.setStyledString(this.styledString)
}

step4. 多个Text绑定同一个StyledString对象

属性字符串最重要的特点，就是可以多次复用。同一个属性字符串对象可以提供给多个Text组件使用。和Span的写法相比，节省重复代码。

@Entry
@Component
struct demo {
  controller: TextController = new TextController()
  controller2: TextController = new TextController()
  controller3: TextController = new TextController()
  
  spanStyle1: SpanStyle = {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Green })
  };
  spanStyle2: SpanStyle = {
    start: 0,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Red })
  };
  arrayStyled: Array<StyleOptions> = [this.spanStyle1, this.spanStyle2]
  styledString: StyledString = new StyledString("运动45分钟", this.arrayStyled);

  onPageShow(): void {
    this.controller.setStyledString(this.styledString)
    this.controller2.setStyledString(this.styledString)
    this.controller3.setStyledString(this.styledString)
  }

  build() {
    Column() {
      Text(undefined, { controller: this.controller })
      Text(undefined, { controller: this.controller2 })
      Text(undefined, { controller: this.controller3 })
    }
  }
}

最终效果图

三、MutableStyledString使用介绍

MutableStyledString 使用方式与StyledString一致，下面只介绍MutableStyledString在运行时动态修改样式的用法。这个例子展示了在onPageShow这一生命周期中，动态修改MutableStyledString，达到修改Text样式的效果。

step1. 创建一个MutableStyledString对象

mutableStyledString1: MutableStyledString = new MutableStyledString("");

step2. 在运行阶段，修改MutableStyledString

这里想要从this.styledString复制一份样式设置。借助appendStyledString，末尾添加了已有的属性字符串this.styledString，因为this.mutableStyledString1原本是空的，所以相当于复制。
复制之后，清空了第一个字的样式。

  onPageShow(): void {
    this.mutableStyledString1.appendStyledString(this.styledString) //通过append完成拷贝
    this.mutableStyledString1.removeStyle(0,1,StyledStringKey.FONT) // 修改属性字符串
  }

step3. 绑定给Text组件

属性字符串修改后，需要重新setStyledString，属性字符串的改动才能在对应的text上生效。

  onPageShow(): void {
    this.controller4.setStyledString(this.mutableStyledString1)
  }

完整demo

@Entry
@Component
struct demo {
  controller: TextController = new TextController()
  controller2: TextController = new TextController()
  controller3: TextController = new TextController()
  controller4: TextController = new TextController()

  spanStyle1: SpanStyle = {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Green })
  };
  spanStyle2: SpanStyle = {
    start: 0,
    length: 2,
    styledKey: StyledStringKey.FONT,
    styledValue: new TextStyle({ fontColor: Color.Red })
  };
  arrayStyled: Array<StyleOptions> = [this.spanStyle1, this.spanStyle2]
  styledString: StyledString = new StyledString("运动45分钟", this.arrayStyled);
  mutableStyledString1: MutableStyledString = new MutableStyledString(""); // 创建一个空的属性字符串

  onPageShow(): void {
    this.mutableStyledString1.appendStyledString(this.styledString) //通过append完成拷贝
    this.mutableStyledString1.removeStyle(0,1,StyledStringKey.FONT) // 修改属性字符串

    this.controller.setStyledString(this.styledString)
    this.controller2.setStyledString(this.styledString)
    this.controller3.setStyledString(this.styledString)
    this.controller4.setStyledString(this.mutableStyledString1)
  }

  build() {
    Column() {
      Text(undefined, { controller: this.controller })
      Text(undefined, { controller: this.controller2 })
      Text(undefined, { controller: this.controller3 })

      Text(undefined, { controller: this.controller4 })
    }
  }
}

最终效果如下