HarmonyOS使用系统图标-原创手记-慕课网

HarmonyOS图标符号是系统内置的一套图标资源库。开发者可以通过图标的资源名称，利用SymbolGlyph和SymbolSpan组件可以高效索引并使用相应的图标。使用HarmonyOS Symbol，开发者不仅可以轻松地通过图标名称引用图标资源，从而简化开发流程。还能够确保其应用程序在视觉上与系统的设计风格保持一致，从而提升用户界面的专业性和准确性。

对于系统资源，可以通过“$r('sys.symbol.resource_name')”的形式访问。其中，sys表示系统资源；symbol为系统图标资源类型；resource_name为资源名称。通过HarmonyOS Symbol图标网站（https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/），可以轻松查看到HarmonyOS Symbol图标的资源名称。

以下是SymbolGlyph组件和SymbolSpan组件使用系统图标的示例。本节示例源码可以在“ArkUISymbolGlyphSymbolSpan”应用下找到。

1. 利用SymbolGlyph组件使用系统图标

SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标和使用动效图标。

以下是利用SymbolGlyph组件使用系统图标的例子。

// SymbolGlyph通过$r引用Resource资源来创建，目前仅支持系统预置的Symbol资源名。
// 通过fontSize属性设置SymbolGlyph的大小。
// 通过fontColor属性设置SymbolGlyph的颜色。
Row() {
  SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
    .fontSize(48)
    .fontColor([Color.Black])

  SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
    .fontSize(72)
    .fontColor([Color.Green])

  SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
    .fontSize(96)
    .fontColor([Color.Pink])
}

在上述例子中：

SymbolGlyph通过$r引用Resource资源来创建，目前仅支持系统预置的Symbol资源名。
通过fontSize属性设置SymbolGlyph的大小。
通过fontColor属性设置SymbolGlyph的颜色。

2. 利用SymbolSpan组件使用系统图标

SymbolSpan作为Text组件的子组件，可在文本中穿插显示图标小符号。

以下是利用SymbolSpan组件使用系统图标的例子。

// SymbolSpan可作为Text的子组件用于显示图标小符号。
// 可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标。
// 通过fontSize属性设置SymbolSpan的大小。
// 通过fontColor属性设置SymbolSpan的颜色。
Row() {
  Text() {
    SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
      .fontSize(48)
      .fontColor([Color.Black])

    SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
      .fontSize(72)
      .fontColor([Color.Green])

    SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
      .fontSize(96)
      .fontColor([Color.Pink])
  }
}

在上述例子中：

SymbolSpan可作为Text的子组件用于显示图标小符号。可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标。
通过fontSize属性设置SymbolSpan的大小。
通过fontColor属性设置SymbolSpan的颜色。

3. fontWeight属性

通过fontWeight属性可以设置SymbolGlyph组件或者SymbolSpan组件的粗细，以下是一个例子。

// 通过fontWeight属性设置SymbolSpan组件的粗细。
Row() {
  Column() {
    Text("Lighter")
    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)
    }
  }
}

在上述例子中，通过fontWeight属性设置SymbolSpan的粗细，值分别是Lighter、Normal、Bold三者之一。

4. renderingStrategy属性

通过renderingStrategy属性可以设置SymbolGlyph组件或者SymbolSpan组件的渲染策略，以下是一个例子。

// 通过renderingStrategy属性设置SymbolSpan的渲染策略。
Row() {
  Column() {
    Text("单色")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(96)
        .renderingStrategy(SymbolRenderingStrategy.SINGLE)
        .fontColor([Color.Black, Color.Green, Color.White])
    }
  }

  Column() {
    Text("多色")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(96)
        .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
        .fontColor([Color.Black, Color.Green, Color.White])
    }
  }

  Column() {
    Text("分层")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(96)
        .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
        .fontColor([Color.Black, Color.Green, Color.White])
    }
  }
}

在上述例子中，通过renderingStrategy属性设置SymbolSpan的渲染策略，值分别是SINGLE、MULTIPLE_COLOR、MULTIPLE_OPACITY三者之一，代表单色、多色、分层的渲染效果。

5. effectStrategy属性

通过effectStrategy属性可以设置SymbolGlyph组件或者SymbolSpan组件的动效策略，以下是一个例子。

// 通过effectStrategy属性设置SymbolSpan的动效策略。
Row() {
  Column() {
    Text("无动效")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_wifi'))
        .fontSize(96)
        .effectStrategy(SymbolEffectStrategy.NONE)
    }
  }

  Column() {
    Text("整体缩放动效")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_wifi'))
        .fontSize(96)
        .effectStrategy(SymbolEffectStrategy.SCALE)
    }
  }

  Column() {
    Text("层级动效")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_wifi'))
        .fontSize(96)
        .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
    }
  }
}

在上述例子中，通过effectStrategy属性设置SymbolSpan的动效策略，值分别是NONE、SCALE、HIERARCHICAL三者之一，代表无动效、整体缩放动效、层级动效的渲染效果。

6. symbolEffect属性

通过symbolEffect属性可以设置SymbolGlyph组件的自定义动效策略，以下是一个例子。

@State isActive: boolean = true;

@State triggerValueReplace: number = 0;

// 通过symbolEffect属性设置自定义SymbolGlyph的动效。
Row() {
  // 通过设置symbolEffect属性，可以同时配置SymbolGlyph的动效策略及其播放状态。
  Column() {
    Text("可变颜色动效")

    SymbolGlyph($r('sys.symbol.ohos_wifi'))
      .fontSize(96)
      .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)

    Button(this.isActive ? '关闭' : '播放').onClick(() => {
      this.isActive = !this.isActive;
    })
  }

  // 通过设置symbolEffect属性，可以同时指定SymbolGlyph的动效策略及其播放触发条件。
  Column() {
    Text("弹跳动效")

    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;
    })
  }
}

在上述例子中，通过symbolEffect属性设置SymbolGlyph的自定义动效策略，自定义的类型可以是SymbolEffect的子类，比如HierarchicalSymbolEffect或者BounceSymbolEffect等。

以下是相关HarmonyOS应用生态的相关学习资料：

《跟老卫学 HarmonyOS 开发》开源免费教程，https://github.com/waylau/harmonyos-tutorial
《鸿蒙 HarmonyOS 手机应用开发实战》（清华大学出版社）
“鸿蒙系统实战短视频 App 从 0 到 1 掌握 HarmonyOS”（https://coding.imooc.com/class/674.html）
《鸿蒙 HarmonyOS 应用开发入门》（清华大学出版社）
“2024 鸿蒙零基础快速实战 - 仿抖音 App 开发（ArkTS 版）”（https://coding.imooc.com/class/843.html）
《鸿蒙 HarmonyOS 应用开发从入门到精通战（第 2 版）》（北京大学出版社）
《鸿蒙之光 HarmonyOS NEXT 原生应用开发入门》（清华大学出版社）