HarmonyOS鸿蒙Next中属性字符串的文档示例能不能写点基础用法示例

开发者你好，可以看下属性字符串这个官方文档，以下为你提供一些使用示例：

1、使用AppStorage来传递属性字符串：

【背景知识】

• 属性字符串：属性字符串StyledString/MutableStyledString（其中MutableStyledString继承自StyledString，下文统称为StyledString），可用于在字符或段落级别上设置文本样式。将StyledString应用到文本组件上，可以采用多种方式修改文本，包括调整字号、添加字体颜色、使文本具备可点击性，以及通过自定义方式绘制文本等。
• AppStorage：AppStorage是与应用进程绑定的全局UI状态存储中心，由UI框架在应用启动时创建，将UI状态数据存储于运行内存，实现应用级全局状态共享。

// index.ets
import { LengthMetrics, router } from '@kit.ArkUI';

export class Param {
  mutableStyledString?: MutableStyledString
}

@Entry
@Component
struct Index {
  controller: TextController = new TextController();
  textStyleAttrs: TextStyle =
    new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic })
  mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟 目标达成", [
    {
      start: 2,
      length: 2,
      styledKey: StyledStringKey.FONT,
      styledValue: this.textStyleAttrs
    },
    {
      start: 7,
      length: 4,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12) })
    }
  ]);

  build() {
    Column() {
      Text(undefined, { controller: this.controller })
        .margin({ top: 10 }).onAppear(() => {
        this.controller.setStyledString(this.mutableStyledString)
      })

      Button("通过AppStorage传递属性字符串").onClick(() => {
        let param = new Param()
        param.mutableStyledString = this.mutableStyledString
        AppStorage.setOrCreate('mutableStyledString', param)

        router.pushUrl({
          url: "pages/Second",
        })
      })

    }
  }
}

// Second.ets
import { Param } from './Index';

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

  build() {
    Column() {
      // 显示属性字符串
      Text(undefined, { controller: this.controller })
        .margin({ top: 10 }).onAppear(() => {

        let param = AppStorage.get<Param>('mutableStyledString')!
        this.controller.setStyledString(param.mutableStyledString)
      })
    }
    .width('100%')
    .height('100%')
  }
}

2、利用属性字符串实现文字长按变色：

【背景知识】

• 属性字符串是方便灵活应用文本样式的对象，可通过TextController中的setStyledString方法与Text组件绑定。
• replaceString：可以替换指定范围的字符串。

【解决方案】 可以利用属性字符串实现，实现思路如下：

1. 参照官网示例-设置事件给Text绑定长按事件。

mutableStyledString: MutableStyledString = new MutableStyledString(this.message, [
  {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.GESTURE,
    styledValue: this.clickGestureAttr
  },
  {
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr1
  },
  {
    start: 6,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr2
  }
]);

1. 参照官网示例-属性字符串处理给已绑定的属性字符串实现长按替换效果。

clickGestureAttr: GestureStyle = new GestureStyle({
  onLongPress: () => {
    this.mutableStyledString.replaceStyle({
      start: 0,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontColor: Color.Pink })
    });
    this.controller.setStyledString(this.mutableStyledString);
  }
})

1. 完整的代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue });
  fontStyleAttr2: TextStyle = new TextStyle({ fontColor: Color.Green });
  controller: TextController = new TextController();
  clickGestureAttr: GestureStyle = new GestureStyle({
    onLongPress: () => {
      this.mutableStyledString.replaceStyle({
        start: 0,
        length: 5,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: Color.Pink })
      });
      this.controller.setStyledString(this.mutableStyledString);
    }
  })
  mutableStyledString: MutableStyledString = new MutableStyledString(this.message, [
    {
      start: 0,
      length: 5,
      styledKey: StyledStringKey.GESTURE,
      styledValue: this.clickGestureAttr
    },
    {
      start: 0,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: this.fontStyleAttr1
    },
    {
      start: 6,
      length: 5,
      styledKey: StyledStringKey.FONT,
      styledValue: this.fontStyleAttr2
    }
  ]);

  async onPageShow() {
    this.controller.setStyledString(this.mutableStyledString);
  }

  build() {
    Column() {
      // 包含事件的属性字符串
      Text(undefined, { controller: this.controller })
        .fontSize(30)
        .copyOption(CopyOptions.InApp)
        .draggable(true)
        .clip(true)
    }
    .height('100%')
    .width('100%')
  }
}

属性字符串（StyledString）的基础用法其实很简单，主要用来在同一段文本中应用不同的样式（如颜色、字体、大小等）。以下是一个简洁的示例：

import { StyledString, StyleRange } from '@kit.ArkUI';

// 创建基础文本
let text = "HarmonyOS Next 开发";

// 定义样式范围：对"Next"应用红色
let styleRange: StyleRange = {
  start: 10, // "Next"起始位置
  length: 4,  // 长度为4个字符
  style: { color: '#FF0000' } // 红色样式
};

// 构建属性字符串
let styledString = new StyledString(text, [styleRange]);

// 在Text组件中使用
Text(styledString)
  .fontSize(20)

关键点：

1. StyledString由原始文本和样式范围数组组成
2. StyleRange指定起始位置、长度和要应用的样式
3. 支持多种样式属性：color、fontSize、fontWeight等

这样就能快速实现文本部分样式差异化，比拆分多个Text组件更高效。