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

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    })  }}
相关推荐
lqj_本人1 小时前
鸿蒙next版开发:分析JS Crash(进程崩溃)
华为·harmonyos
未来的嗒嘀嗒1 小时前
探秘Sketch及其替代者:设计软件精选指南
ui
Harmony_QI2 小时前
鸿蒙北向开发环境安装指南
华为·harmonyos·鸿蒙
墨笺染尘缘2 小时前
Unity——对RectTransform进行操作
ui·unity·c#·游戏引擎
23zhgjx-NanKon6 小时前
华为eNSP:RSTP
网络·安全·网络安全·华为
lqj_本人10 小时前
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
数码相机·华为·harmonyos
Python图像识别-113 小时前
基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)
python·yolo·ui
Xam_d_LM14 小时前
【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)
开发语言·c++·qt·ui·贴图·qt5
学习向前冲15 小时前
华为交换机配置默认路由
服务器·网络·华为