harmony 鸿蒙SymbolGlyph

  • 2025-06-12
  • 浏览 (4)

SymbolGlyph

The SymbolGlyph component represents a symbol glyph.

NOTE

This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

SymbolGlyph(value?: Resource)

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value Resource No Resource of the SymbolGlyph component, for example, $r(‘sys.symbol.ohos_wifi’).

NOTE

The resources referenced in $r(‘sys.symbol.ohos_wifi’) are preset in the system. The SymbolGlyph component supports only the preset symbol resources. If unsupported resources are referenced, an exception occurs.

Attributes

The universal attributes are supported. With regard to text attributes, only the following attributes are supported.

fontColor

fontColor(value: Array<ResourceColor>)

Sets the color of the SymbolGlyph component.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value Array<ResourceColor> Yes Color of the SymbolGlyph component.
Default value: depending on the rendering strategy

fontSize

fontSize(value: number|string|Resource)

Sets the size of the SymbolGlyph component. When using the string type, numeric string values with optional units, for example, “10” or “10fp”, are supported.

The display size of the symbol glyph is controlled by the fontSize setting. Once width or height is specified, other universal attributes will only affect the size of the component’s placeholder, not the symbol glyph itself.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number |string |Resource Yes Size of the SymbolGlyph component.
Default value: 16fp
Unit: fp
Percentage strings are not supported.

fontWeight

fontWeight(value: number|FontWeight|string)

Sets the font weight of the SymbolGlyph component. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is 400. For the string type, only strings of the number type are supported, for example, “400”, “bold”, “bolder”, “lighter”, “regular”, and “medium”, which correspond to the enumerated values in FontWeight.

The sys.symbol.ohos_lungs icon does not support font weight setting.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number |FontWeight |string Yes Font weight of the SymbolGlyph component.
Default value: FontWeight.Normal

renderingStrategy

renderingStrategy(value: SymbolRenderingStrategy)

Sets the rendering strategy of the SymbolGlyph component.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value SymbolRenderingStrategy Yes Rendering strategy of the SymbolGlyph component.
Default value: SymbolRenderingStrategy.SINGLE

The figure below shows the effects of different rendering strategies.

renderingStrategy

effectStrategy

effectStrategy(value: SymbolEffectStrategy)

Sets the effect strategy of the SymbolGlyph component.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value SymbolEffectStrategy Yes Effect strategy of the SymbolGlyph component.
Default value: SymbolEffectStrategy.NONE

symbolEffect12+

symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)

Sets the symbol effect and effect state for the SymbolGlyph component.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
symbolEffect SymbolEffect Yes Symbol effect of the SymbolGlyph component.
Default value: SymbolEffect
isActive boolean No Whether the effect is active.
Default value: false

symbolEffect12+

symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number)

Sets the symbol effect and effect trigger for the SymbolGlyph component.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
symbolEffect SymbolEffect Yes Symbol effect of the SymbolGlyph component.
Default value: SymbolEffect
triggerValue number No Value that, when changed, initiates the animation of the SymbolGlyph component.
To prevent the motion effect from triggering initially, set it to -1.

NOTE

When configuring the symbol effect, use the effectStrategy attribute or a single symbolEffect attribute. Mixing multiple effect attributes is not allowed.

minFontScale18+

minFontScale(scale: Optional<number|Resource>)

Sets the minimum font scale factor for the SymbolGlyph component.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scale Optional<number |Resource> Yes Minimum font scale factor for the SymbolGlyph component.
Value range: [0, 1]
The value 0 results in the minimum scaling.
NOTE
A value less than 0 is handled as 0. A value greater than 1 is handled as 1. Abnormal values are ineffective by default.

maxFontScale18+

maxFontScale(scale: Optional<number|Resource>)

Sets the maximum font scale factor for the SymbolGlyph component.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scale Optional<number |Resource> Yes Maximum font scale factor for the SymbolGlyph component.
Value range: [1, +∞)
NOTE
A value less than 1 is handled as 1. Abnormal values are ineffective by default.

ScaleSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER
direction EffectDirection No Effect direction.
Default value: EffectDirection.DOWN

constructor12+

constructor(scope?: EffectScope, direction?: EffectDirection)

A constructor used to create a ScaleSymbolEffect instance, which comes with a scaling animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER
direction EffectDirection No Effect direction.
Default value: EffectDirection.DOWN

HierarchicalSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
fillStyle EffectFillStyle No Effect fill style.
Default value: EffectFillStyle.CUMULATIVE

constructor12+

constructor(fillStyle?: EffectFillStyle)

A constructor used to create a HierarchicalSymbolEffect instance, which comes with a hierarchical animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
fillStyle EffectFillStyle No Effect fill style.
Default value: EffectFillStyle.CUMULATIVE

AppearSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

constructor12+

constructor(scope?: EffectScope)

A constructor used to create an AppearSymbolEffect instance, which comes with an appear animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

DisappearSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

constructor12+

constructor(scope?: EffectScope)

A constructor used to create a DisappearSymbolEffect instance, which comes with a disappear animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

BounceSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER
direction EffectDirection No Effect direction.
Default value: EffectDirection.DOWN

constructor12+

constructor(scope?: EffectScope, direction?: EffectDirection)

A constructor used to create a BounceSymbolEffect instance, which comes with a bounce animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER
direction EffectDirection No Effect direction.
Default value: EffectDirection.DOWN

ReplaceSymbolEffect12+

Inherits from SymbolEffect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Properties

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

constructor12+

constructor(scope?: EffectScope)

A constructor used to create a ReplaceSymbolEffect instance, which comes with a replace animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
scope EffectScope No Effect scope.
Default value: EffectScope.LAYER

SymbolEffectStrategy11+

Enumerates symbol effect types. Once applied, the symbol effect becomes active instantly, eliminating the need for triggering.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
NONE 0 No effect (default value).
SCALE 1 Scale effect as a whole.
HIERARCHICAL 2 Hierarchical effect.

SymbolRenderingStrategy11+

Enumerates the rendering modes.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
SINGLE 0 Single-color mode (default value).
The default color is black.
You can set one or multiple colors, but only the first color will be applied.
MULTIPLE_COLOR 1 Multi-color mode.
A maximum of three colors can be set. If only one color is set, it updates the color of the first layer, leaving other colors at their default values.
The sequence of color settings matches the layering order of the symbol; any colors beyond the number of symbol layers will not take effect.
Only color values are accepted. Opacity settings do not take effect.
MULTIPLE_OPACITY 2 Layered mode.
The default color is black. You can set one or multiple colors, but only the first color will be applied.
Opacity is predefined for the layers: 100% for the first layer, 50% for the second layer, and 20% for the third layer.

SymbolEffect12+

Defines the SymbolEffect class.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

PulseSymbolEffect12+

A constructor used to create a PulseSymbolEffect instance, which comes with a pulse animation effect.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

EffectDirection12+

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
DOWN 0 The symbol scales down and then returns to its original size.
UP 1 The symbol scales up and then returns to its original size.

EffectScope12+

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
LAYER 0 Layered mode.
WHOLE 1 Whole mode.

EffectFillStyle12+

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
CUMULATIVE 0 Cumulative style.
ITERATIVE 1 Iterative style.

Events

The universal events are supported.

Example

Example 1: Setting Rendering and Effect Strategies

This example demonstrates different rendering and effect strategies using renderingStrategy and effectStrategy.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Column() {
          Text("Light")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Lighter)
            .fontSize(96)
        }

        Column() {
          Text("Normal")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Normal)
            .fontSize(96)
        }

        Column() {
          Text("Bold")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Bold)
            .fontSize(96)
        }
      }

      Row() {
        Column() {
          Text("Single-color mode")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black, Color.Green, Color.White])
        }

        Column() {
          Text("Multi-color mode")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
            .fontColor([Color.Black, Color.Green, Color.White])
        }

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

      Row() {
        Column() {
          Text("No effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(SymbolEffectStrategy.NONE)
        }

        Column() {
          Text("Overall scale effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(1)
        }

        Column() {
          Text("Hierarchical effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(2)
        }
      }
    }
  }
}

symbol

Example 2: Setting Effects

This example demonstrates the effects of variable color animation and replacement animation using symbolEffect.

// xxx.ets
@Entry
@Component
struct Index {
  @State isActive: boolean = true;
  @State triggerValueReplace: number = 0;
  replaceFlag: boolean = true;

  build() {
    Column() {
      Row() {
        Column() {
          Text("Variable color animation")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)
          Button(this.isActive ? 'Off' : 'Play').onClick(() => {
            this.isActive = !this.isActive;
          })
        }.margin({ right: 20 })

        Column() {
          Text("Replacement animation")
          SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1'))
            .fontSize(96)
            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
          Button('Trigger').onClick(() => {
            this.replaceFlag = !this.replaceFlag;
            this.triggerValueReplace = this.triggerValueReplace + 1;
          })
        }
      }
    }.margin({
      left: 30,
      top: 50
    })
  }
}

symbol

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/YEbIg0
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录