鸿蒙开发教程实战案例源码分享-好看的SwitchButton
鸿蒙开发教程实战案例源码分享-好看的SwitchButton
鸿蒙开发好看的自定义SwitchButton，也适用也开关按钮
一、效果图：
看视频效果更直观点：
鸿蒙开发教程实战案例源码分享-好看的SwitchButton
二、思路：
自定义组件，加上点动画效果
三、关键代码：
@ComponentV2
export struct SwitchButton{@Require @Param buttonTextList: ResourceStr[]@Event onClickUse: (i: number) => void@Param switchOne: number = 0@Param WidthBp: number = 0@Param buttonNum: '2'|'3' = '2'build() {Row(){Stack(){Button({ type: ButtonType.Capsule }).width(this.buttonNum == '3' ? '33%' : '50%').buttonSwitch(2, this.WidthBp < 2 ? 14 : 16, $r('app.color.switch_button'), FontWeight.Medium)Row(){Repeat<ResourceStr>(this.buttonTextList).each((ri: RepeatItem<ResourceStr>) => {Button(ri.item, { type: ButtonType.Capsule, stateEffect: false }).clickEffect(animationStyle.isClick()).fontColor(this.switchOne == ri.index ? $r("sys.color.font") :$r("sys.color.icon_tertiary")).buttonSwitch(2, this.WidthBp < 2 ? 14 : 16, Color.Transparent, this.switchOne == ri.index ? FontWeight.Bold : FontWeight.Medium).width(this.buttonNum == '3' ? 'auto' : '49%').onClick(()=> {animationStyle.AnimTo(this.onClickUse(ri.index), 0)})}).key((item: string | Resource) => item.toString())}.width('100%').borderRadius(100).justifyContent(FlexAlign.SpaceAround)}
四、项目demo结构图：
有需要完整源码demo的私信我，我每天都看私信的