鸿蒙5.0开发进阶：UI开发常用组件-图标小符号 (SymbolGlyph/SymbolSpan)

于 2024-09-06 15:06:39 发布
阅读量442 收藏 9
点赞数 23
分类专栏： ArkUI 鸿蒙开发 文章标签： harmonyos 华为 android 前端 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Androidbye/article/details/141960160
版权

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

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

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者龚众皓： 『 蜀道衫 』，不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习文档。
  • 同时可以期待后续文章ing🚀。
懂你的大海
关注
  • 23
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TextField
sybh的博客
01-12 1055
支持的XML属性、创建TextField、设置TextField、设置TextField的背景、设置TextField的提示文字、设置Bubble、设置TextField的内边距、设置TextField的多行显示、设置TextField不可用状态、响应焦点变化、设置基线
【linux】安装zabbix时候报错：Error downloading packages: zabbix-server-mysql-5.0.2-1.el7.x86_64
互联网老辛
08-01 6452
文章目录问题复现问题分析问题解决 问题复现 安装zabbixserver，，zabbix-agent的时候，报错： Error downloading packages: zabbix-server-mysql-5.0.2-1.el7.x86_64: [Errno 256] No more mirrors to try. zabbix-agent-5.0.2-1.el7.x86_64: [Errno 256] No more mirrors to try. 问题分析 一般这样的问题是因为用的国外源，下载速度
鸿蒙5.0开发进阶：UI开发组件布局-媒体查询 (@ohos.mediaquery)
Androidbye的博客
09-04 601
媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
鸿蒙5.0开发【自定义全局组件 UI 构建异常问题和解决】
2401_82772199的博客
08-03 667
在之前的文章中（[鸿蒙自定义 Dialog 的 6 种方式]），提到了自定义 Dialog 某些情况下无法渲染显示的问题，其本质是 UI 组件构造时，UI 上下文获取异常，一般在异步回调或者非 UI 组件环境中构造全局类的组件（例如弹窗或者 HUD）时，容易遇到这个问题。
HarmonyOS实战开发：按钮（Button）-常用组件
2401_84194030的博客
05-09 789
Button是按钮组件..........
鸿蒙5.0开发【ArkUI动态组件与组件工厂的最佳封装策略】
2401_82772199的博客
08-06 980
本篇整理项目开发中关于组件封装的最佳实践。探讨ArkUI中组件的动态操作技巧，以及如何通过工厂封装模式来优化组件的创建和管理，从而提升开发效率和应用性能。
apt-get: relocation error:/libapt-private.so.0.0 version APTPKG_5.0 not defined in file libapt-pkg
w294954902的博客
12-14 6431
ubuntu16.04 完整错误： apt-get: relocation error: /usr/lib/x86_64-linux-gnu/libapt-private.so.0.0: symbol _ZlsRSoRKN3APT9PrettyPkgE version APTPKG_5.0 not defined in file libapt-pkg.so.5.0 with link time...
react-native-ui-lib：React Native的UI组件库
02-01
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 （您将需要Expo App） 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native> = 0.60.0 请使用react-native-ui-...
爬虫进阶：反反爬虫技术--1User-Agent伪装，构造合理的 HTTP 请求头
huoyingchong64的博客
04-30 1894
1.　构造合理的 HTTP 请求头 除了处理网站表单，requests 模块还是一个设置请求头的利器。HTTP 的请求头是在你每次向网络服务器发送请求时，传递的一组属性和配置信息。HTTP 定义了十几种古怪的请求头类型，不过大多数都不常用。只有下面的七个字段被大多数浏览器用来初始化所有网络请求（表中信息是我自己浏览器的数据） 请求头可以通过 requests 模块进行自定义。https://ww...
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 1096
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1424
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）多线程能力场景化示例最佳实践
weixin_55362248的博客
09-02 1586
并发的意思是多个任务同时执行。并发模型分为两大类：基于内存共享的并发模型和基于消息传递的并发模型。
鸿蒙界面开发（12）：选项卡布局(Tabs)
littleyy666的博客
09-02 774
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。设置自定义导航栏需要使用tabBar的参数，以其支持的的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。//参数) {//结构。
HarmonyOS开发实战（ Beta5版）不要使用函数/方法作为复用组件的入参规范实践
weixin_55362248的博客
09-03 1167
复用时会触发组件的构造，如果函数入参中存在耗时操作，会影响复用性能。
鸿蒙双向认证
最新发布
xo19882011的专栏
09-06 209
切换到鸿蒙也要用上双向认证。使用的其中的 rcp 功能，详细文档双向认证包含两个方向，分为客户端验证服务端的证书和服务端验证客户端的证书。
鸿蒙轻内核M核源码分析系列二一 02 文件系统LittleFS
鸿蒙开发知识记录
09-05 423
会分2部分来介绍结构体部分，先介绍LittleFS文件系统的结构体，然后介绍LiteOS-M内核中提供的和LittleFS相关的一些结构体。
HarmonyOS NEXT 体验调用云数据库更新排行榜单
weixin_69135651的博客
09-03 402
它利用了声明式UI、响应式编程和组件化的概念,创建自定组件，更加便捷的组合。用户可以通过“排行帮单”功能查看某个主题或领域的热门内容，并能够向朋友或群体推荐特定的项目。主题选择：用户可以选择不同的主题（如“电影”、“音乐”、“书籍”等）。社交平台用户，尤其是热衷于获取和分享信息的年轻人和用户群体。帮助用户快速获取他人推荐的热门内容，减少选择困难。投票机制：用户可以参与投票，影响排行榜的排名。增强社交平台的内容活跃度，提高用户留存率。
鸿蒙OS创新实践：动态声控话筒开发指南
s297165331的专栏
09-05 391
在鸿蒙OS的生态中，开发者们不断探索和创新，以期为用户带来更丰富的交互体验。最近，我萌生了一个想法：制作一个能够随着声音动态变化的话筒组件。尽管网络上缺乏现成的参考案例，但我决定亲自动手，将这一创意变为现实。本文将深入解析这一开发过程，分享我的实战经验和技术细节。通过本文的详细解析，我们不仅实现了一个动态声控话筒组件，还深入了解了鸿蒙OS中的绘图API和动态效果实现方法。希望这篇文章能够为其他开发者提供灵感和指导，共同推动鸿蒙生态的创新与发展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值