# 如何利用属性字符串实现文字长按变色

#### 问题现象

使用Text组件嵌套Span组件如何做到选中之后单独设置颜色，并且添加点击事件？

#### 背景知识

*   属性字符串是方便灵活应用文本样式的对象，可通过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
          }
        ]);
        ```
        
    2.  参照官网示例-属性字符串处理给已绑定的属性字符串实现长按替换效果。
        
        ```
        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);
          }
        });
        ```
        
    
    完整示例参考如下：
    
    ```
    @Entry
    @Component
    struct MutableStyledStringChangeColor {
      @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%');
      }
    }
    ```