鸿蒙5.0版开发：ArkTS基础组件（SymbolGlyph）

最新推荐文章于 2024-10-08 11:04:45 发布
最新推荐文章于 2024-10-08 11:04:45 发布
阅读量643 收藏 23
点赞数 27
分类专栏： 鸿蒙5.0 ArkTS ArkUI 文章标签： harmonyos 华为 android 前端 鸿蒙 ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142387191
版权
鸿蒙5.0 同时被 3 个专栏收录
114 篇文章 0 订阅
订阅专栏
ArkUI
114 篇文章 0 订阅
订阅专栏
ArkTS
110 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

SymbolGlyph

显示图标小符号的组件。

说明：

该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持子组件。

接口

SymbolGlyph(value: Resource)

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

参数：

参数名参数类型必填参数描述
valueResource是SymbolGlyph组件的资源名,如 $r(‘sys.symbol.ohos_wifi’)。

说明：

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

属性

支持通用属性，不支持文本通用属性，仅支持以下特有属性：

fontColor

fontColor(value: Array<ResourceColor>)

设置SymbolGlyph组件颜色。

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

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

参数：

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

fontSize

fontSize(value: number | string | Resource)

设置SymbolGlyph组件大小。

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

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

参数：

参数名类型必填说明
valuenumber | string | Resource是SymbolGlyph组件大小。
默认值：系统默认值。

fontWeight

fontWeight(value: number | FontWeight | string)

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

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

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

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

参数：

参数名类型必填说明
valuenumber | string | FontWeight是SymbolGlyph组件粗细。
默认值：FontWeight.Normal

renderingStrategy

renderingStrategy(value: SymbolRenderingStrategy)

设置SymbolGlyph组件渲染策略。$r(‘sys.symbol.ohos_*’)中引用的资源仅ohos_folder_badge_plus支持分层与多色模式。

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

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

参数：

参数名类型必填说明
valueSymbolRenderingStrategy是SymbolGlyph组件渲染策略。
默认值：SymbolRenderingStrategy.SINGLE

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

effectStrategy

effectStrategy(value: SymbolEffectStrategy)

设置SymbolGlyph组件动效策略。$r(‘sys.symbol.ohos_*’)中引用的资源仅ohos_wifi支持层级动效模式。

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

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

参数：

参数名类型必填说明
valueSymbolEffectStrategy是SymbolGlyph组件动效策略。
默认值：SymbolEffectStrategy.NONE

symbolEffect12+

symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)

设置SymbolGlyph组件动效策略及播放状态。

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

参数：

参数名类型必填说明
symbolEffectSymbolEffect|ScaleSymbolEffect|HierarchicalSymbolEffect|
AppearSymbolEffect|DisappearSymbolEffect|BounceSymbolEffect|
ReplaceSymbolEffect|PulseSymbolEffect		是SymbolGlyph组件动效策略。
默认值：SymbolEffect
isActiveboolean否SymbolGlyph组件动效播放状态。
默认值：false

symbolEffect12+

symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number)

设置SymbolGlyph组件动效策略及播放触发器。

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

参数：

参数名类型必填说明
symbolEffectSymbolEffect|ScaleSymbolEffect|HierarchicalSymbolEffect|
AppearSymbolEffect|DisappearSymbolEffect|BounceSymbolEffect|
ReplaceSymbolEffect|PulseSymbolEffect		是SymbolGlyph组件动效策略。
默认值：SymbolEffect
triggerValuenumber否SymbolGlyph组件动效播放触发器，在数值变更时触发动效。
如果首次不希望触发动效，设置-1。

说明：

动效属性，仅支持使用effectStrategy属性或单个symbolEffect属性，不支持多种动效属性混合使用。

SymbolEffect12+

constructor12+

constructor()

SymbolEffect的构造函数，无动效。

ScaleSymbolEffect12+

constructor12+

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

ScaleSymbolEffect的构造函数，缩放动效。

参数：

参数名参数类型必填参数描述
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER
directionEffectDirection否动效方向。
默认值：EffectDirection.DOWN

属性

名称参数类型描述
scopeEffectScope动效范围。
默认值：EffectScope.LAYER
directionEffectDirection动效方向。
默认值：EffectDirection.DOWN

HierarchicalSymbolEffect12+

constructor12+

constructor(fillStyle?: EffectFillStyle)

HierarchicalSymbolEffect的构造函数，层级动效。

参数：

参数名参数类型必填参数描述
fillStyleEffectFillStyle否动效模式。
默认值：EffectFillStyle.CUMULATIVE

属性

名称类型必填说明
fillStyleEffectFillStyle否动效模式。
默认值：EffectFillStyle.CUMULATIVE

AppearSymbolEffect12+

constructor12+

constructor(scope?: EffectScope)

AppearSymbolEffect的构造函数，出现动效。

参数：

参数名参数类型必填参数描述
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

属性

名称类型必填说明
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

DisappearSymbolEffect12+

constructor12+

constructor(scope?: EffectScope)

DisappearSymbolEffect的构造函数，消失动效。

参数：

参数名参数类型必填参数描述
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

属性

名称类型必填说明
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

BounceSymbolEffect12+

constructor12+

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

BounceSymbolEffect的构造函数，弹跳动效。

参数：

参数名参数类型必填参数描述
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER
directionEffectDirection否动效方向。
默认值：EffectDirection.DOWN

属性

名称类型必填说明
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER
directionEffectDirection否动效方向。
默认值：EffectDirection.DOWN

ReplaceSymbolEffect12+

constructor12+

constructor(scope?: EffectScope)

ReplaceSymbolEffect的构造函数，替换动效。

参数：

参数名参数类型必填参数描述
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

属性

名称类型必填说明
scopeEffectScope否动效范围。
默认值：EffectScope.LAYER

PulseSymbolEffect12+

constructor12+

constructor()

PulseSymbolEffect的构造函数，脉冲动效。

EffectDirection12+

名称值说明
DOWN0图标缩小再复原。
UP1图标放大再复原。

EffectScope12+

名称值说明
LAYER0分层模式。
WHOLE1整体模式。

EffectFillStyle12+

名称值说明
CUMULATIVE0累加模式。
ITERATIVE1迭代模式。

事件

支持通用事件。

示例

示例1

// 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("单色")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black, Color.Green, Color.White])
        }

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

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

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

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

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

示例2

SymbolGlyph使用symbolEffect属性实现可变颜色动效和替换动效。

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

  build() {
    Column() {
      Row() {
        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;
          })
        }.margin({right:20})

        Column() {
          Text("替换动效")
          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
    })
  }
}

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。 
星星不闪包退1
关注
专栏目录
鸿蒙5.0版开发：ArkTS组件通用属性（自定义绘制设置）
m0_73088370的博客
09-05 800
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
HarmonyOS NEXT实战开发：图标小符号 (SymbolGlyph/SymbolSpan)
hanyanyou的博客
07-24 874
SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标。
鸿蒙HarmonyOS NEXT开发：自定义绘制设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 778
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
HarmonyOS NEXT实战开发：焦点事件
hanyanyou的博客
07-29 671
基础概念与规范.............
鸿蒙HarmonyOS实战开发：TypeScript-Symbols【基础篇】
2401_84194030的博客
04-09 1305
symbol类型的值是通过Symbol构造函数创建的。
鸿蒙Harmony开发：通用焦点样式事件规范
2401_84917132的博客
08-07 937
层级页面是焦点框架中特定容器组件的统称，涵盖Page、Dialog、SheetPage、ModalPage、Menu、Popup、NavBar、NavDestination等。
鸿蒙开发入门day09-常用组件（下）
来自想要赚大钱的小周同学
09-06 1224
学习目标：了解ArkUI的常用组件
HarmonyOS Next开发学习手册——焦点事件
maniuT的博客
07-05 1013
由组件自定义的走焦算法，规格由组件定义。
鸿蒙开发之ArkUI组件常用组件图片和文本
iOSbird的博客
03-27 1144
Text('左对齐')Text('中间对齐')Text('右对齐')TextAlign是枚举，有Start、Center、End。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
HarmonyOS鸿蒙开发指南:基于ArkTS开发 公共事件与通知
sybh的博客
01-10 1882
HarmonyOS通过CES（Common Event Service，公共事件服务）为应用程序提供订阅、发布、退订公共事件的能力。公共事件可分为系统公共事件和自定义公共事件。系统公共事件：系统将收集到的事件信息，根据系统策略发送给订阅该事件的用户程序。例如：系统关键服务发布的系统事件（例如：hap安装，更新，卸载等）。自定义公共事件：应用自定义一些公共事件用来实现跨应用的事件通信能力。每个应用都可以按需订阅公共事件，订阅成功且公共事件发布，系统会把其发送给应用。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 数据管理 关系型数据库
sybh的博客
01-11 1728
关系型数据库（Relational Database，RDB）是一种基于关系模型来管理数据的数据库。关系型数据库基于SQLite组件提供了一套完整的对本地数据库进行管理的机制，对外提供了一系列的增、删、改、查等接口，也可以直接运行用户输入的SQL语句来满足复杂的场景需要。当应用卸载后，其相关数据库会被自动清除。关于数据库锁机制，开发者无需关注其具体实现。关系型数据库是在SQLite基础上实现的本地数据操作机制，提供给用户无需编写原生SQL语句就能进行数据增删改查的方法，同时也支持原生SQL语句操作。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 音频播放开发
sybh的博客
01-10 1589
音频播放的主要工作是将音频数据转码为可听见的音频模拟信号并通过输出设备进行播放，同时对播放任务进行管理。图1音频播放状态机图2音频播放零层图。
鸿蒙next开发者第一课02.DevEcoStudio的使用-习题
10-03 548
鸿蒙next开发第一课第02小节习题
HarmonyOS NEXT应用开发实战(一、打造最好用的网络通信模块组件)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
10-04 1756
通过将网络库移植到HarmonyOS，我们大大简化了网络请求的过程。开发者可以享受到更加清晰、简洁的API，同时也提升了开发效率。如果你正在开发HarmonyOS应用，不妨尝试一下这个网络通信模块封装，让你的开发过程更加顺畅。希望本文对你有所帮助，欢迎交流与分享经验！最后，推荐下笔者的业余开源app影视项目“爱影家”，推荐分享给与我一样喜欢观影的朋友。爱影家app开源项目介绍及源码。
10款好用的开源 HarmonyOS 工具库
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
09-30 1479
HarmonyOS NEXT 正式版即将发布，你在学习鸿蒙的过程还有哪些好用的工具库吗，欢迎分享给V 哥，关注威哥爱编程，一起学习鸿蒙开发。
鸿蒙HarmonyOS开发生态：构建万物互联的未来
GY的的专栏
10-04 1464
鸿蒙系统的分布式技术实现了多设备之间的协同工作，为用户带来了更加便捷、智能的全场景体验。从最初的HarmonyOS 1.0，到HarmonyOS 2.0在手机、平板等设备的广泛应用，再到HarmonyOS 3.0和4.0的发布，鸿蒙系统的功能和应用范围不断扩大，用户体验持续优化。鸿蒙系统在技术上不断演进，从最初的智慧屏应用，到手机、平板、手表等多种设备的广泛使用，再到HarmonyOS NEXT的全面成熟与加速发展，鸿蒙系统的功能和应用范围不断扩大。鸿蒙生态的繁荣离不开开发者的积极参与和贡献。
HarmonyOS Next元服务开发快速入门案例
最新发布
weixin_69135651的博客
10-08 411
在resources>base>element>string.json中修改“app_name”值，该值表示“应用名称”。开源协议使用：Apache License 2.0 ，代码包支持免费使用，可进行二次开发后选择开源或闭源。在app.json5中修改“vender”值，该值表示“应用程序供应商”。6.在项目下的resource>base>media下添加图片。1.创建项目，选择Atomic Service。3.卡片创建完成，修改卡片配置代码。1.创建微、小、中、大卡片。二、创建卡片widget。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值