HarmonyOS NEXT实战开发：图标小符号 (SymbolGlyph/SymbolSpan)

最新推荐文章于 2024-09-08 22:14:49 发布
最新推荐文章于 2024-09-08 22:14:49 发布
阅读量779 收藏 27
点赞数 22
分类专栏： 鸿蒙 鸿蒙next版 文章标签： harmonyos 华为 android 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanyanyou/article/details/140674815
版权

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

创建图标

SymbolGlyph通过引用Resource资源来创建，资源引用类型可以通过$r创建Resource类型对象。

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

添加到文本中

SymbolSpan能作为Text的子组件显示图标小符号。可以在一个Text内添加多个SymbolSpan来显示一串图标。

  • 创建SymbolSpan。

    SymbolSpan组件需要写到Text组件内，单独的SymbolSpan组件不会显示。

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

  • 通过fontSize属性设置SymbolSpan的大小。

    Row() {
  Column() {
    Text("48")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(48)
        .renderingStrategy(SymbolRenderingStrategy.SINGLE)
        .fontColor([Color.Black, Color.Green, Color.White])
    }
  }

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

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

  • 通过fontWeight属性设置SymbolSpan组件的粗细。

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

  • 通过fontColor属性设置SymbolSpan的颜色。

    Row() {
  Column() {
    Text("Black")
    Text() {
        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
          .fontSize(96)
          .fontColor([Color.Black])
    }
  }

  Column() {
    Text("Green")
    Text() {
      SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
        .fontSize(96)
        .fontColor([Color.Green])
    }
  }

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

  • 通过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])
    }
  }
}

  • 通过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)
    }
  }
}

  • SymbolSpan不支持通用事件。

自定义图标动效

相较于effectStrategy属性启动即触发动效，可以通过以下两种方式控制动效的播放状态以及更多样的动效策略选择。

关于effectStrategy属性与symbolEffect属性多种动态属性使用生效原则，

  • 通过symbolEffect属性同时设置SymbolGlyph的动效策略及动效播放状态。

    @State isActive: boolean = true;
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的动效策略及播放触发器。

    @State triggerValueReplace: number = 0;
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;
  })
}

添加事件

SymbolGlyph组件可以添加通用事件，例如绑定onClick、onTouch等事件来响应操作。

@State wifiColor: ResourceColor = Color.Black;
SymbolGlyph($r('sys.symbol.ohos_wifi'))
.fontSize(96)
.fontColor([this.wifiColor])
.onClick(()=>{
  this.wifiColor = Color.Gray
})

场景示例

// xxx.ets
@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 symbolSourcesIndex: number = 0;
  @State symbolText: string[] = ['顺序播放', '单曲循环', '随机播放']
  @State symbolTextIndex: number = 0;
  @State fontColorValue:ResourceColor = Color.Grey;
  @State fontColorValue1:ResourceColor = '#E8E8E8';

  build() {
    Column( { space: 10 }) {
      Row() {
        Text(){
          Span('当前播放列表')
            .fontSize(20)
            .fontWeight(FontWeight.Bolder)
          Span('（101）')
        }
      }
      Row() {
        Row({ space: 5 }) {
          SymbolGlyph(this.symbolSources[this.symbolSourcesIndex])
            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
            .fontSize(20)
            .fontColor([this.fontColorValue])
          Text(this.symbolText[this.symbolTextIndex])
            .fontColor(this.fontColorValue)
        }
        .onClick(()=>{
          this.symbolTextIndex++;
          this.symbolSourcesIndex++;
          this.triggerValueReplace++;
          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
            this.symbolSourcesIndex = 0;
            this.triggerValueReplace = 0;
          }
          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
            this.symbolTextIndex = 0;
          }
        })
        .width('75%')

        Row({ space: 5 }) {
          Text(){
            SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
              .fontColor([this.fontColorValue])
              .fontSize(20)
          }
          Text(){
            SymbolSpan($r('sys.symbol.heart_badge_plus'))
              .fontColor([this.fontColorValue])
              .fontSize(20)
          }
          Text(){
            SymbolSpan($r('sys.symbol.ohos_trash'))
              .fontColor([this.fontColorValue])
              .fontSize(20)
          }
        }
        .width('25%')
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲一")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲二")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲三")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲四")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲五")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲六")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Row(){
        Row(){
          Text("歌曲七")
        }.width('82%')
        Row({ space: 5}) {
          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
          SymbolGlyph($r('sys.symbol.trash'))
            .fontColor([this.fontColorValue])
            .fontSize(20)
        }
      }
      Divider().width(5).color(this.fontColorValue1).width('98%')
      Column(){
        Text("关闭")
      }
      .alignItems(HorizontalAlign.Center)
      .width('98%')
    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height(400)
    .padding({
      left:10,
      top:10
    })
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5102
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
HarmonyOS Next开发学习手册——Native XComponent
maniuT的博客
07-01 1220
Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。
【HarmonyOS NEXT】HarmonyOS自带的icon图标库如何使用
m0_54713489的博客
07-26 739
如何使用HarmonyOS NEXT自带的图标库，并且附上导入外部字体图标ttf的方法
鸿蒙(HarmonyOS NEXT)使用Image或HarmonyOSSymbol加载图片资源
liang04273的博客
07-09 916
项目开发中都会使用图片，有本地，网络图片以及对应的格式。目前Image支持加载string、和类型的数据源，png、jpg、bmp、svg和gif类型的图片格式。以及使用系统图标
Symbol
u011649976的博客
08-01 295
概述 ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是
【鸿蒙实战开发】鸿蒙next版开发基础布局
HarmonyOS_001的博客
07-01 1627
今日核心：1.设计资源-图标库2.属性：布局属性、背景属性3.线性布局。
鸿蒙HarmonyOS NEXT开发：动态属性设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-10 1093
动态设置组件的属性，支持开发者在属性设置时使用if/else语法，且根据需要使用多态样式设置属性。
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
06-29
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于HarmonyOS NEXT开发智能提醒助手
软贱开发攻城狮
06-30 1万+
随着智能设备的普及和物联网技术的飞速发展，人们对于智能化、个性化服务的需求日益增加，智能设备已经深入到我们生活的方方面面。在这个智能化的时代，一款能够实时、精准地提供信息提醒的智能助手，在内卷严重的当下，对于提升个人工作效率、优化生活质量显得尤为重要，这样的背景下，智能提醒助手应运而生，成为了人们生活中不可或缺的一部分。智能提醒助手不仅可以帮助用户管理时间、提醒重要事项，还能根据用户的习惯和需求提供个性化的服务。
鸿蒙HarmonyOS实战开发：TypeScript-Symbols【基础篇】
2401_84194030的博客
04-09 1279
symbol类型的值是通过Symbol构造函数创建的。
鸿蒙开发之ArkUI组件常用组件图片和文本
iOSbird的博客
03-27 1125
Text('左对齐')Text('中间对齐')Text('右对齐')TextAlign是枚举，有Start、Center、End。
告别图标荒：三个平台助你快速丰富设计图库
我码玄黄的博客
08-25 303
在之前的文章中，我们介绍了如何在设计中嵌套图标实例，本次介绍下如何在缺少图标积累的情况下快速获取图标。在设计项目时，图标往往能起到画龙点睛的作用。但如果没有现成的图标资源，寻找合适的图标可能会耗费大量时间。本文将介绍三种高效获取图标的途径，帮助您轻松解决这一问题。以上介绍的三个平台，几乎能满足日常设计工作中对于图标的大部分需求。希望这些建议能帮助您更加高效地完成设计任务。
【HarmonyOS】- HAR与HSP区别及使用原则
不靠谱先森的博客
09-08 443
HAR与HSP系统提供了两种共享包，HAR静态共享包和HSP动态共享包。HAR与HSP都是为了实现代码和资源的共享，都可以包含代码、C++库、资源和配置文件，最大的不同之处在于：HAR中的代码和资源跟随使用方编译，如果有多个使用方，它们的编译产物中会存在多份相同拷贝；而HSP中的代码和资源可以独立编译，在运行时进程中代码和资源也只会存在一份。
鸿蒙轻内核M核源码分析系列十七（2） 异常钩子函数的注册操作
鸿蒙开发知识记录
09-08 1300
本文中所涉及的源码，以内核为例，均可以在开源站点https://gitee.com/openharmony/kernel_liteos_m 获取。鸿蒙轻内核异常钩子模块代码主要在目录下。异常钩子函数的注册、解注册、异常钩子类型定义在。
鸿蒙（API 12 Beta6版）GPU加速引擎服务【自适应VRS】
最新发布
鸿蒙的技术博客
09-08 969
XEngine Kit提供自适应VRS功能，其通过合理分配画面的计算资源，视觉无损降低渲染频次，使不同的渲染图像使用不同的渲染速率，能够有效提高渲染性能。
HarmonyOS应用开发（ Beta5.0）一杯冰美式的时间“拿捏Grid组件”
weixin_55362248的博客
09-08 1414
​这里呢是采用Grid组件中的控制滚动,里面的rowsTemplate属性为一行且不对列的行数属性进行操作，这样的话就可以控制水平滑动了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值