当前位置： 首页 > article >正文

鸿蒙UI开发——小图标的使用

article 2024/11/13 17:03:51

1、前 言

鸿蒙SDK中为我们提供了大量的高质量内置图标，图标详见(https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/)

图标资源一览：

图片

除了基本的图标图形外，我们还可以支持图标的多种填充模式（单色、多色、分层），例如：

图片

另外，除了颜色的填充模式外，还支持一些动效（整体动效、层级动效）。例如：

图片

上述能力，我们可以通过图标小符号（SymbolGlyph/SymboSpan）来实现。下面介绍其基本使用。

2、图标小符号 (SymbolGlyph/SymbolSpan)

SymbolGlyph和SymbolSpan都可用用于渲染图标小符号，区别在于：SymbolSpan能作为Text文本组件的子组件。但SymbolSpan不支持通用事件，而SymbolGlyph支持通用事件。

2.1、创建图标

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

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

❓如何获取图标的引用路径？

上文我们说到，系统内置资源的链接为：https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/ ，我们可以在该页面中找到自己想要的图标，获取其图标名，以文件夹图标为例，在页面中如下：

图片

在网页上资源名字为：folder_badge_plus，我们则可以通过 sys.symbol.folder_badge_plus获取到该资源。代码为：

SymbolGlyph($r('sys.symbol.folder_badge_plus'))

2.2、添加到文本中

SymbolSpan能作为Text的子组件显示图标小符号。可以在一个Text内添加多个SymbolSpan来显示一串图标。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)    }  }}

图片

2.3、自定义图标动效

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

1）通过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;  })}

图片

2）通过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;  })}

图片

2.4、添加事件

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

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

图片

3、Demo

效果如下：

图片

代码如下：​​​​​​

// xxx.ets@Entry@Componentstruct 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    })  }}

http://www.kler.cn/a/390180.html

相关文章：

  • 系统架构设计师论文
  • 小面馆叫号取餐流程 佳易王面馆米线店点餐叫号管理系统操作教程
  • Kubernetes在容器编排中的应用
  • const限定符-C语言中指针的“可变与不可变”法则
  • LeetCode【0027】移除元素
  • Rust 建造者模式
  • 使用API有效率地管理Dynadot域名，列表形式查看账户whois联系人信息
  • Dubbo负载均衡
  • Baget 私有化nuget
  • SpringBoot助力企业资产优化
  • Matlab实现鹈鹕优化算法（POA）求解路径规划问题
  • [Docker#4] 镜像仓库 | 部分常用命令
  • AI生活之我用AI处理Excel表格
  • go函数传值是值传递？还是引用传递？slice案例加图解
  • 数据分析-44-时间序列预测之深度学习方法TCN
  • Autosar CP Network Management模块规范导读
  • C#中 layout的用法
  • 易泊车牌识别相机：4S 店的智能之选
  • Spring Boot与Spring Data JPA：简化数据库操作
  • Python毕业设计选题：基于django+vue的医院挂号系统设计与实现
  • stm32 踩坑笔记
  • 通过EtherNetIP转Profinet网关实现跨品牌EthernetIP协议的PLC通讯
  • 【系统设计】数据库压缩技术详解：从基础到实践（附Redis内存优化实战案例）
  • C#中break和continue的区别？
  • HARCT 2025 分论坛4：智能系统传感、传感器开发和数据融合中的智能数据分析
  • 【NOIP普及组】统计单词数