图解鸿蒙之 SymbolGlyph - 通过 symbolEffect、fontSize、fontColor 属性展示播放列表的效果 宝子，你看哦！
-
这里有个好玩的示例，就像一个小小的魔法舞台。
-
它用了 symbolEffect 这个魔法道具，让舞台上的东西动起来。
-
fontSize 和 fontColor 这两个小魔法，能改变字体的大小和颜色呢。
这么一弄，就展示出像播放列表一样的效果啦，是不是很奇妙！
// 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('80%')
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('80%')
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
})
}
}
```
PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇～
