ArkUI 学习之位置设置：SymbolGlyph（图标）和SymbolSpan（文本图标）

在现代应用开发中，图标是用户界面设计的关键元素。HarmonyOS提供了强大的SymbolGlyph组件，用于创建和控制图标的显示效果。

🔊：image 和 symbol 的区别定义：image通常指的是图像、图片或照片等视觉元素，而symbol通常指的是代表某个概念或符号的具体符号、标志或图案等。

一、使用SymbolGlyph创建图标

SymbolGlyph组件允许您通过资源引用轻松创建图标，并支持多种属性来控制图标的外观和渲染方式。您可以通过以下示例来了解如何设置不同的属性：

SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
    .fontSize(96)
    .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
    .fontColor([Color.Black, Color.Green, Color.White])

在这个示例中，SymbolGlyph通过renderingStrategy属性设置了多色渲染策略，并应用了多个颜色。这个功能非常适合用于复杂的多色图标。

二、将SymbolGlyph图标嵌入文本

SymbolSpan组件允许您将图标嵌入到Text组件中，使图标与文本内容紧密结合。以下是如何在文本中添加图标的示例：

Text() {
    SymbolSpan($r('sys.symbol.ohos_trash'))
        .fontWeight(FontWeight.Bold)
        .fontSize(72)
        .fontColor([Color.Red])
}    

通过这种方式，您可以将图标直接集成到文本中，并通过调整fontWeight和fontSize等属性，实现不同的视觉效果。

三、自定义图标动效

SymbolGlyph不仅支持静态图标，还可以通过symbolEffect属性为图标添加动态效果。在下面的示例中，我们将演示如何使用弹跳动效来增强图标的交互性：

@Entry
@Component
struct Index {
  /** 状态变量 */
  @State isActive: boolean = true;

  build() {
    Column() {
      Text("弹跳动效示例")

      SymbolGlyph($r('sys.symbol.ellipsis_message_1'))
        .fontSize(96)
        .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.isActive) //为图标添加动态效果

      Button(this.isActive ? '停止' : '开始').onClick(() => {
        this.isActive = !this.isActive;
      })
    }
  }
}

这个示例展示了如何通过按钮控制图标的动效，利用BounceSymbolEffect实现图标的弹跳效果。这样的动效可以显著提升用户界面的动态感。

四、实战场景：打造多状态播放列表图标

在实际应用中，您可以利用SymbolGlyph和SymbolSpan组件来创建复杂的UI元素。

例如，您可以设计一个多状态的播放列表图标，结合动效和颜色变化，提升用户体验：

@Entry
@Component
struct Index {
  /** 状态变量 */
  @State triggerValueReplace: number = 0;
  @State symbolSources: Resource[] = [$r('sys.symbol.repeat'), $r('sys.symbol.repeat_1'), $r('sys.symbol.arrow_left_arrow_right')];
  @State symbolText: string[] = ['顺序播放', '单曲循环', '随机播放'];
  @State fontColorValue: ResourceColor = Color.Grey;

  build() {
    Column() {
      Row() {
        SymbolGlyph(this.symbolSources[this.triggerValueReplace])
          .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
          .fontSize(20)
          .fontColor([this.fontColorValue])

        Text(this.symbolText[this.triggerValueReplace])
          .fontColor(this.fontColorValue)
      }
      .height('100%')
      .onClick(() => {
        this.triggerValueReplace = (this.triggerValueReplace + 1) % this.symbolSources.length;
      })
    }.width('100%')
  }
}

这个场景示例展示了如何创建一个多状态图标，根据用户点击切换播放模式，并通过不同的图标和文本来反馈当前状态。

五、总结

SymbolGlyph和SymbolSpan组件提供了丰富的功能，使您能够在HarmonyOS中轻松创建和管理图标。通过掌握这些组件的用法，您可以在应用中实现精美的图标效果，并为用户带来更好的视觉体验。