图标小符号 (SymbolGlyph/SymbolSpan)
==============================

SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标和使用动效图标。SymbolSpan作为Text组件的子组件，可在文本中穿插显示图标小符号。具体用法请参考[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)和[SymbolSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan)组件的API文档。

#### 创建图标

SymbolGlyph通过$r引用Resource资源来创建，目前仅支持系统预置的Symbol资源名。

相关资源可参考[系统图标](https://developer.huawei.com/consumer/cn/doc/design-guides/system-icons-0000001929854962)。

SymbolGlyph($r('sys.symbol.ohos\_folder\_badge\_plus'))
  .fontSize(96)
  .renderingStrategy(SymbolRenderingStrategy.SINGLE)
  .fontColor(\[Color.Black, Color.Green, Color.White\])

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d7/v3/WQHWN40mReKEWzIMcVhtog/zh-cn_image_0000002594668000.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=170C42BCBECE176282C25FE9F6AC321E894AA756181E8DACEC84AAC88A7FE5A8)

#### 添加到文本中

[SymbolSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan)可作为[Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text)的子组件用于显示图标小符号。可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标。

*   创建SymbolSpan。
    
    SymbolSpan组件需嵌入在Text组件中才能显示，单独使用不会呈现任何内容。
    
    Text() {
      SymbolSpan($r('sys.symbol.ohos\_trash'))
        .fontWeight(FontWeight.Normal)
        .fontSize(96)
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4e/v3/6Y5ajaQqSjCk2Z6tTJc1Xw/zh-cn_image_0000002594827928.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=0EA4DFB93ECDD4493613ED42CE8FB64B6D5E1B5BCD0A3BB0711E83C450D901CE)
    
*   通过[fontSize](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan#fontsize)属性设置SymbolSpan的大小。
    
    Row() {
      Column() {
        Text('48')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(48)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    
      Column() {
        Text('72')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(72)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    
      Column() {
        Text('96')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c1/v3/qP5w9sjHSsiQIJx2HtPyqA/zh-cn_image_0000002625187375.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=7B187B7D6A41CABF842CE2DAEFEABACD57958E628A228D4605823CF8675C947C)
    
*   通过[fontWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan#fontweight)属性设置SymbolSpan组件的粗细。
    
    Row() {
      Column() {
        Text('Light')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_trash'))
            .fontWeight(FontWeight.Lighter)
            .fontSize(96)
        }
      }
    
      Column() {
        Text('Normal')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_trash'))
            .fontWeight(FontWeight.Normal)
            .fontSize(96)
        }
      }
    
      Column() {
        Text('Bold')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_trash'))
            .fontWeight(FontWeight.Bold)
            .fontSize(96)
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fe/v3/hnhRgCykTs6yOCI6UI73tA/zh-cn_image_0000002625107519.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=BAA051F52237280A4DE882606F6897C0CE1800DE724F98A427DF9ADDDC771F4B)
    
*   通过[fontColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan#fontcolor)属性设置SymbolSpan的颜色。
    
    Row() {
      Column() {
        Text('Black')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .fontColor(\[Color.Black\])
        }
      }
    
      Column() {
        Text('Green')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .fontColor(\[Color.Green\])
        }
      }
    
      Column() {
        Text('Pink')
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .fontColor(\[Color.Pink\])
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/86/v3/oe3a-cmwROSE8z264BFF8w/zh-cn_image_0000002594668002.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=9B3AEBC7134757D097A49FD2D9A18DFC5C6CE782A11DEA6C19D159D3D726D3EB)
    
*   通过[renderingStrategy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan#renderingstrategy)属性设置SymbolSpan的渲染策略。
    
    Row() {
      Column() {
        // 请将$r('app.string.single\_color')替换为实际资源文件，在本示例中该资源文件的value值为"单色"
        Text($r('app.string.single\_color'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    
      Column() {
        // 请将$r('app.string.multi\_color')替换为实际资源文件，在本示例中该资源文件的value值为"多色"
        Text($r('app.string.multi\_color'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE\_COLOR)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    
      Column() {
        // 请将$r('app.string.hierarchical')替换为实际资源文件，在本示例中该资源文件的value值为"分层"
        Text($r('app.string.hierarchical'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_folder\_badge\_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE\_OPACITY)
            .fontColor(\[Color.Black, Color.Green, Color.White\])
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/32/v3/uUyMyY_zRnCiR7iL4hTL4A/zh-cn_image_0000002594827930.png?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=519AD2AA36AD1F466BCE3F728949208040B7BA4C850206324F35EC53EA0A86D3)
    
*   通过[effectStrategy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolspan#effectstrategy)属性设置SymbolSpan的动效策略。
    
    Row() {
      Column() {
        // 请将$r('app.string.no\_action')替换为实际资源文件，在本示例中该资源文件的value值为"无动效"
        Text($r('app.string.no\_action'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_wifi'))
            .fontSize(96)
            .effectStrategy(SymbolEffectStrategy.NONE)
        }
      }
    
      Column() {
        // 请将$r('app.string.overall\_scaling\_animation\_effect')替换为实际资源文件，在本示例中该资源文件的value值为"整体缩放动效"
        Text($r('app.string.overall\_scaling\_animation\_effect'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_wifi'))
            .fontSize(96)
            .effectStrategy(SymbolEffectStrategy.SCALE)
        }
      }
    
      Column() {
        // 请将$r('app.string.hierarchical\_animation')替换为实际资源文件，在本示例中该资源文件的value值为"层级动效"
        Text($r('app.string.hierarchical\_animation'));
        Text() {
          SymbolSpan($r('sys.symbol.ohos\_wifi'))
            .fontSize(96)
            .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
        }
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/35/v3/vaH-Bd7MQZCNRUPOeK5fAA/zh-cn_image_0000002625187377.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=AD8110C3EE2674EE44BB8D37978C705B922C81428CEC14A796DECF1B9B62DA27)
    
*   SymbolSpan不支持通用事件。
    

#### 自定义图标动效

相较于effectStrategy属性在启动时即触发动效，可以通过以下两种方式来控制动效的播放状态，以及选择更多样化的动效策略。

关于effectStrategy属性与symbolEffect属性的多种动态属性使用及生效原则，详情请参阅[SymbolGlyph.symbolEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#symboleffect12-1)属性的说明。

*   通过设置SymbolEffect属性，可以同时配置SymbolGlyph的动效策略和播放状态。
    
    @State isActive: boolean = true;
    
    Column() {
      // 请将$r('app.string.variable\_color\_animation')替换为实际资源文件，在本示例中该资源文件的value值为"可变颜色动效"
      Text($r('app.string.variable\_color\_animation'));
      SymbolGlyph($r('sys.symbol.ohos\_wifi'))
        .fontSize(96)
        .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)
      // 请将$r('app.string.off')替换为实际资源文件，在本示例中该资源文件的value值为"关闭"
      // 请将$r('app.string.on')替换为实际资源文件，在本示例中该资源文件的value值为"播放"
      Button(this.isActive ? $r('app.string.off') : $r('app.string.on')).onClick(() => {
        this.isActive = !this.isActive;
      })
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9c/v3/QpD-TY1mSbehfml6304bBg/zh-cn_image_0000002625107521.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=C6DFDC96621664C03868F5AF6507ABDA82014D080A96AE1564779A77054D7599)
    
*   通过设置SymbolEffect属性，可以同时指定SymbolGlyph的动画效果策略及其播放触发条件。
    
    @State triggerValueReplace: number = 0;
    
    Column() {
      // 请将$r('app.string.bounce\_animation')替换为实际资源文件，在本示例中该资源文件的value值为"弹跳动效"
      Text($r('app.string.bounce\_animation'));
      SymbolGlyph($r('sys.symbol.ellipsis\_message\_1'))
        .fontSize(96)
        .fontColor(\[Color.Gray\])
        .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP),
                      this.triggerValueReplace)
      Button('trigger').onClick(() => {
        this.triggerValueReplace = this.triggerValueReplace + 1;
      })
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f1/v3/Kipi5tXxTbauo-D1zuJYsw/zh-cn_image_0000002594668004.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=CE0D3700D843C02CBF4ACF43CC9EF32E6617B1C364A2C64667EE88B8F8C36910)
    
*   从API version 20开始，支持通过设置SymbolEffect属性为[ReplaceSymbolEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#replacesymboleffect12)，设置[ReplaceEffectType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#replaceeffecttype20枚举说明)为ReplaceEffectType.SLASH\_OVERLAY，可以指定SymbolGlyph的禁用动画效果及其播放触发条件。
    
    @State triggerValueReplace: number = 0;
    replaceFlag: boolean = true;
    @State renderMode: number = 1;
    
    Column() {
      // 请将$r('app.string.disable\_animation')替换为实际资源文件，在本示例中该资源文件的value值为"禁用动效"
      Text($r('app.string.disable\_animation'));
      SymbolGlyph(this.replaceFlag ? $r('sys.symbol.eye\_slash') : $r('sys.symbol.eye'))
        .fontSize(96)
        .renderingStrategy(this.renderMode)
        .symbolEffect(new ReplaceSymbolEffect(EffectScope.LAYER, ReplaceEffectType.SLASH\_OVERLAY),
                      this.triggerValueReplace)
      Button('trigger').onClick(() => {
        this.replaceFlag = !this.replaceFlag;
        this.triggerValueReplace = this.triggerValueReplace + 1;
      })
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ca/v3/eJ81HkAOSjSEkB3Lq0-pWw/zh-cn_image_0000002594827932.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=CE9C954EF556DCF1BB8748A6FD7E18706D34F19CEFB567FC3356E0C80716E3C5)
    
*   从API version 20开始，支持通过设置SymbolEffect属性为[ReplaceSymbolEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#replacesymboleffect12)，设置[ReplaceEffectType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#replaceeffecttype20枚举说明)为ReplaceEffectType.CROSS\_FADE，可以指定SymbolGlyph的快速替换动画效果及其播放触发条件。
    
    @State triggerValueReplace: number = 0;
    replaceFlag: boolean = true;
    
    Column() {
      // 请将$r('app.string.quick\_replacement\_animation')替换为实际资源文件，在本示例中该资源文件的value值为"快速替换动效"
      Text($r('app.string.quick\_replacement\_animation'));
      SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark\_circle') : $r('sys.symbol.repeat\_1'))
        .fontSize(96)
        .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE, ReplaceEffectType.CROSS\_FADE),
                      this.triggerValueReplace)
      Button('trigger').onClick(() => {
        this.replaceFlag = !this.replaceFlag;
        this.triggerValueReplace = this.triggerValueReplace + 1;
      })
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f7/v3/is4wv-bURGCLlCp41Ddnmw/zh-cn_image_0000002625187379.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=5B98A44478EB5D4CB5E0E8ACA8A12656425634A10D9B816AD1CE1F5456C37790)
    

#### 设置阴影和渐变色

*   从API version 20开始，支持通过[symbolShadow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#symbolshadow20)接口实现了symbolGlyph组件显示阴影效果。
    
    @State isActive: boolean = true;
    
    options: ShadowOptions = {
      radius: 10.0,
      color: Color.Blue,
      offsetX: 10,
      offsetY: 10,
    };
    
    Column() {
      // 请将$r('app.string.shadow\_ability')替换为实际资源文件，在本示例中该资源文件的value值为"阴影能力"
      Text($r('app.string.shadow\_ability'));
      SymbolGlyph($r('sys.symbol.ohos\_wifi'))
        .fontSize(96)
        .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), !this.isActive)
        .symbolShadow(this.options)
      // 请将$r('app.string.off')替换为实际资源文件，在本示例中该资源文件的value值为"关闭"
      // 请将$r('app.string.on')替换为实际资源文件，在本示例中该资源文件的value值为"播放"
      Button(!this.isActive ? $r('app.string.off') : $r('app.string.on')).onClick(() => {
        this.isActive = !this.isActive;
      })
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0b/v3/KpqnJKjpSUyJotOkWwYKEA/zh-cn_image_0000002625107523.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=7F769A37030F6E2B4EB774B73C833D1553FE94D1BB20467190098A09B72252D6)
    
*   从API version 20开始，支持通过[shaderStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#shaderstyle20)接口实现了symbolGlyph组件显示渐变色效果。
    
    radialGradientOptions: RadialGradientOptions = {
      center: \['50%', '50%'\],
      radius: '20%',
      colors: \[\[Color.Red, 0.0\], \[Color.Blue, 0.3\], \[Color.Green, 0.5\]\],
      repeating: true,
    };
    
    Column() {
      // 请将$r('app.string.radial\_gradient')替换为实际资源文件，在本示例中该资源文件的value值为"径向渐变"
      Text($r('app.string.radial\_gradient'))
        .fontSize(18)
        .fontColor(0xCCCCCC)
        .textAlign(TextAlign.Center)
      SymbolGlyph($r('sys.symbol.ohos\_folder\_badge\_plus'))
        .fontSize(96)
        .shaderStyle(\[new RadialGradientStyle(this.radialGradientOptions)\])
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/45/v3/FSJK0EwQT9W6qR2-kF8CoQ/zh-cn_image_0000002594668006.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=D556E1958DC132854006338E2FB163F77FA1E95ABB97FC314AD562AE3D3B8B5E)
    

#### 添加事件

SymbolGlyph组件可以添加通用事件，例如绑定[onClick](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-click#onclick)、[onTouch](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-touch#ontouch)等事件来响应操作。

@State wifiColor: ResourceColor = Color.Black;

SymbolGlyph($r('sys.symbol.ohos\_wifi'))
  .fontSize(96)
  .fontColor(\[this.wifiColor\])
  .onClick(() => {
    this.wifiColor = Color.Gray;
  })

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/44/v3/RBsodL2GScWxmGomkRvjJA/zh-cn_image_0000002594827934.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=94E2F0755A085BBAD459535E5F6C1CB491D994BC6DCD2BF8254A778BC1D1613C)

#### 场景示例

该示例通过symbolEffect、fontSize、fontColor属性展示了播放列表的效果。

// resourceGetString封装工具，从资源中获取字符串
import resourceGetString from '../../common/resource';

@Entry
@Component
struct SymbolMusicDemo {
  @State triggerValueReplace: number = 0;
  @State symbolSources: Resource\[\] =
    \[$r('sys.symbol.repeat'), $r('sys.symbol.repeat\_1'), $r('sys.symbol.arrow\_left\_arrow\_right')\];
  @State symbolSourcesIndex: number = 0;
  @State symbolText: string\[\] = \[
    // 请将$r('app.string.play\_in\_order')替换为实际资源文件，在本示例中该资源文件的value值为"顺序播放"
    this.getUIContext()
      .getHostContext()!.resourceManager.getStringSync($r('app.string.play\_in\_order').id),
    // 请将$r('app.string.play\_in\_single\_repeat')替换为实际资源文件，在本示例中该资源文件的value值为"单曲循环"
    this.getUIContext()
      .getHostContext()!.resourceManager.getStringSync($r('app.string.play\_in\_single\_repeat').id),
    // 请将$r('app.string.shuffle\_play')替换为实际资源文件，在本示例中该资源文件的value值为"随机播放"
    this.getUIContext()
      .getHostContext()!.resourceManager.getStringSync($r('app.string.shuffle\_play').id),
  \];
  @State symbolTextIndex: number = 0;
  @State fontColorValue: ResourceColor = Color.Grey;
  @State fontColorValue1: ResourceColor = '#E8E8E8';

  build() {
    Column({ space: 10 }) {
      Row() {
        Text() {
          // 请将$r('app.string.current\_playlist')替换为实际资源文件，在本示例中该资源文件的value值为"当前播放列表"
          Span(this.getUIContext()
            .getHostContext()!.resourceManager.getStringSync($r('app.string.current\_playlist').id))
            .fontSize(20)
            .fontWeight(FontWeight.Bolder)
          Span('（101）')
        }
      }

      Row() {
        Row({ space: 5 }) {
          SymbolGlyph(this.symbolSources\[this.symbolSourcesIndex\])
            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
            .fontSize(20)
            .fontColor(\[this.fontColorValue\])
          Text(this.symbolText\[this.symbolTextIndex\])
            .fontColor(this.fontColorValue)
        }
        .onClick(() => {
          this.symbolTextIndex++;
          this.symbolSourcesIndex++;
          this.triggerValueReplace++;
          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
            this.symbolSourcesIndex = 0;
            this.triggerValueReplace = 0;
          }
          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
            this.symbolTextIndex = 0;
          }
        })
        .width('75%')

        Row({ space: 5 }) {
          Text() {
            SymbolSpan($r('sys.symbol.arrow\_down\_circle\_badge\_vip\_circle\_filled'))
              .fontColor(\[this.fontColorValue\])
              .fontSize(20)
          }

          Text() {
            SymbolSpan($r('sys.symbol.heart\_badge\_plus'))
              .fontColor(\[this.fontColorValue\])
              .fontSize(20)
          }

          Text() {
            SymbolSpan($r('sys.symbol.ohos\_trash'))
              .fontColor(\[this.fontColorValue\])
              .fontSize(20)
          }
        }
        .width('25%')
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.song')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲一"
          Text($r('app.string.song'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.song\_again')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲二"
          Text($r('app.string.song\_again'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.again\_song')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲三"
          Text($r('app.string.again\_song'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.song\_repeat')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲四"
          Text($r('app.string.song\_repeat'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.repeat\_song')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲五"
          Text($r('app.string.repeat\_song'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.song\_play')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲六"
          Text($r('app.string.song\_play'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row() {
        Row() {
          // 请将$r('app.string.play\_song')替换为实际资源文件，在本示例中该资源文件的value值为"歌曲七"
          Text($r('app.string.play\_song'))
        }.width('82%')

        Row({ space: 5 }) {
          SymbolGlyph($r('sys.symbol.play\_arrow\_triangle\_2\_circlepath'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor(\[this.fontColorValue\])
            .fontSize(20)
        }
      }

      Divider().width(5).color(this.fontColorValue1).width('98%')
      Column() {
        // 请将$r('app.string.off')替换为实际资源文件，在本示例中该资源文件的value值为"关闭"
        Text($r('app.string.off'))
      }
      .alignItems(HorizontalAlign.Center)
      .width('98%')
    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height(400)
    .padding({
      left: 10,
      top: 10
    })
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/jgfmAg0wRwS196nUM7wS5Q/zh-cn_image_0000002625187381.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073304Z&HW-CC-Expire=86400&HW-CC-Sign=3E4BF7F9AC3094D92B3BD2592AEEF41D6F23BDD02D5D8A80ABDE609FAA8645E6)