文档中心

作为Text组件的子组件，用于显示图标小符号的组件。

说明

该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
本模块接口仅可在Stage模型下使用。
该组件支持继承父组件Text的属性，即如果子组件未设置属性且父组件设置属性，则继承父组件设置的全部属性。
SymbolSpan拖拽不会置灰显示。

子组件

PhonePC/2in1TabletTVWearable

不支持子组件。

接口

PhonePC/2in1TabletTVWearable

SymbolSpan(value: Resource)

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Resource	是	SymbolSpan组件的资源名，如 $r('sys.symbol.ohos_wifi')。

说明

$r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolSpan仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。

属性

PhonePC/2in1TabletTVWearable

不支持通用属性，支持以下属性：

fontColor

PhonePC/2in1TabletTVWearable

fontColor(value: Array<ResourceColor>)

设置SymbolSpan组件颜色。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Array<ResourceColor>	是	SymbolSpan组件颜色。默认值：不同渲染策略下默认值不同。

参数名

类型

必填

说明

value

Array<ResourceColor>

是

SymbolSpan组件颜色。

默认值：不同渲染策略下默认值不同。

参数名	类型	必填	说明
value	number \| string \| Resource	是	SymbolSpan组件大小。默认值：16fp 单位：fp

fontWeight

PhonePC/2in1TabletTVWearable

fontWeight(value: number | FontWeight | string)

设置SymbolSpan组件字体粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular" 、"medium"分别对应FontWeight中相应的枚举值。

sys.symbol.ohos_lungs图标不支持设置fontWeight。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	number \| FontWeight \| string	是	SymbolSpan组件字体粗细。默认值：FontWeight.Normal

参数名

类型

必填

说明

value

number | FontWeight | string

是

SymbolSpan组件字体粗细。

默认值：FontWeight.Normal

renderingStrategy

PhonePC/2in1TabletTVWearable

renderingStrategy(value: SymbolRenderingStrategy)

设置SymbolSpan渲染策略。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SymbolRenderingStrategy	是	SymbolSpan渲染策略。默认值：SymbolRenderingStrategy.SINGLE

参数名

类型

必填

说明

value

SymbolRenderingStrategy

是

SymbolSpan渲染策略。

默认值：SymbolRenderingStrategy.SINGLE

不同渲染策略效果可参考以下示意图。

effectStrategy

PhonePC/2in1TabletTVWearable

effectStrategy(value: SymbolEffectStrategy)

设置SymbolSpan动效策略。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SymbolEffectStrategy	是	SymbolSpan动效策略。默认值：SymbolEffectStrategy.NONE

参数名

类型

必填

说明

value

SymbolEffectStrategy

是

SymbolSpan动效策略。

默认值：SymbolEffectStrategy.NONE

attributeModifier¹²⁺

PhonePC/2in1TabletTVWearable

attributeModifier(modifier: AttributeModifier<SymbolSpanAttribute>)

设置组件的动态属性。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
modifier	AttributeModifier<SymbolSpanAttribute>	是	动态设置组件的属性。

事件

PhonePC/2in1TabletTVWearable

不支持通用事件。

示例

PhonePC/2in1TabletTVWearable

示例1（设置渲染和动效策略）

从API version 11开始，该示例通过renderingStrategy、effectStrategy属性展示了不同的渲染和动效策略。

收起
自动换行
深色代码主题
复制
// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      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)
          }
        }
      }

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

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

示例2（设置动态属性）

从API version 12开始，该示例通过attributeModifier属性创建指定样式图标。

收起
自动换行
深色代码主题
复制
import { SymbolSpanModifier } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State modifier: SymbolSpanModifier =
    new SymbolSpanModifier($r("sys.symbol.ohos_wifi")).fontColor([Color.Blue]).fontSize(100);

  build() {
    Row() {
      Column() {
        Text() {
          SymbolSpan(undefined).attributeModifier(this.modifier)
        }

        Button('更改SymbolSpanModifier')
          .onClick(() => {
            this.modifier = new SymbolSpanModifier($r("sys.symbol.ohos_trash")).fontColor([Color.Red]).fontSize(100);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

SymbolSpan

子组件

接口

属性

fontColor

fontSize

fontWeight

renderingStrategy

effectStrategy

attributeModifier12+

事件

示例

示例1（设置渲染和动效策略）

示例2（设置动态属性）

attributeModifier¹²⁺