了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com1.前言自上次在ArkUIeTS上发了“流光按钮”效果，感觉效果已经实现了，但是以后不能在每个项目中都用到这种按钮。我必须复制代码来修改它。这时候组件的优势就发挥出来了。2.效果3.项目结构4.组件介绍组件包括UI布局，组件属性定义，组件默认值，组件代码有详细说明，直接看代码@ComponentexportstructStreamerButton{//旋转角度@State私有角度：数字=0；//旋转速度privatespeed:number=5;//计时器ID私有间隔：number=0;//切换按钮前景色状态@StateprivateisActive:boolean=false;//定义按钮属性publicstreamerButtonAttribute:StreamerButtonAttribute=null;aboutToAppear(){//初始化流光按钮属性对象this.streamerButtonAttribute=StreamerButtonAttribute.filter(this.streamerButtonAttribute)//流光按钮旋转this.speedChange()}aboutToDisappear(){clearInterval(this.interval)}build(){//外部堆叠容器Stack({alignContent:Alignment.Center}){//绘制一个旋转的青色矩形Rect().width(this.streamerButtonAttribute.width*2).height(this.streamerButtonAttribute.height-this.streamerButtonAttribute.border*2).fill(this.streamerButtonAttribute.streamerColor).rotate({x:0,y:0,z:1,angle:this.angle})//蒙住青色矩阵多余部分Stack({alignContent:Alignment.Center}){//点击文本Text(this.streamerButtonAttribute.text).fontSize(this.streamerButtonAttribute.fontSize).fontColor(this.streamerButtonAttribute.fontColor)}.width(this.streamerButtonAttribute.width-this.streamerButtonAttribute.border).height(this.streamerButtonAttribute.height-this.streamerButtonAttribute).border).backgroundColor(this.isActive?this.streamerButtonAttribute.backgroundColor:this.streamerButtonAttribute.foregroundColor).onTouch(()=>{this.isActive=!this.isActive}).onClick(()=>{这个。streamerButtonAttribute.clickCallback?.call(this)}).borderRadius(10)}.width(this.streamerButtonAttribute.width).height(this.streamerButtonAttribute.height).backgroundColor(this.streamerButtonAttribute.backgroundColor)//超出外部堆叠内部的剪裁container.clip(newRect({width:this.streamerButtonAttribute.width,height:this.streamerButtonAttribute.height})).borderRadius(10)}/***流光旋转函数*/speedChange(){varthat=thisthat.angle=0this.interval=setInterval(function(){that.angle+=that.speed},15)}}/***流媒体按钮属性对象*@paramstreamerButtonAttribute*/classStreamerButtonAttribute{//按钮文本publictext:string='button';//按钮文字大小publicfontSize:number=30;//字体颜色publicfontColor:Color|编号|字符串|资源='#FFFFFF'；//按钮宽度publicwidth:number=150;//按钮高度publicheight:number=80;//边框厚度publicborder:number=6;//按钮前景色publicforegroundColor:Color|编号|字符串|资源='#5a5a5a';//按钮背景颜色publicbackgroundColor:Color|编号|字符串|资源='#ef437f';//流光颜色publicstreamerColor:Color|编号|字符串|资源='#00FFFF'；//点击回调函数publicclickCallback:()=>void;/***过滤非法参数*@paramstreamerButtonAttribute*/publicstaticfilter(streamerButtonAttribute:StreamerButtonAttribute):StreamerButtonAttribute{if(null==streamerButtonAttribute||undefined==streamerButtonAttribute){//初始化流媒体按钮属性ObjectstreamerButtonAttribute=newStreamerButtonAttribute();}else{//初始化流光按钮的默认属性对象vardefaultAttribute:StreamerButtonAttribute=newStreamerButtonAttribute();//如果用户没有指定按钮文本，则使用默认按钮文本if(undefined==streamerButtonAttribute.text){streamerButtonAttribute.text=defaultAttribute.text;}//如果用户没有指定字体大小，则使用默认字体大小if(undefined==streamerButtonAttribute.fontSize){streamerButtonAttribute.fontSize=defaultAttribute.fontSize;}//如果用户没有指定字体颜色，则使用默认字体颜色}//如果用户没有指定边框粗细，则使用默认边框粗细}//如果用户未指定宽度，则使用默认宽度if(undefined==streamerButtonAttribute.width){streamerButtonAttribute.width=defaultAttribute.width;}//如果用户没有指定高度，使用默认高度if(undefined==streamerButtonAttribute.height){streamerButtonAttribute.height=defaultAttribute.height;}//如果用户没有指定前景色，则使用默认的前景色if(undefined==streamerButtonAttribute.foregroundColor){streamerButtonAttribute.foregroundColor=defaultAttribute.foregroundColor;}//如果用户没有指定背景色，则使用默认背景色}//如果用户没有指定流光颜色，使用默认的流光颜色}}//返回属性对象returnstreamerButtonAttribute;}}5.如何使用自定义组件，首先引用自定义组件文件，如下：import{StreamerButton}from'../common/StreamerButton.ets'用法如下：StreamerButton()具体使用自定义组件，提供参数，请参见代码详细信息import{StreamerButton}from'../common/StreamerButton.ets'@Entry@Componentstruct示例{build(){Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceAround,alignContent:FlexAlign.Center,alignItems:ItemAlign.Center}){//默认按钮StreamerButton()//修改按钮字体颜色StreamerButton({streamerButtonAttribute:{fontColor:'#FF0000',text:'OK',foregroundColor:Color.Orange}})//自定义按钮StreamerButton({streamerButtonAttribute:{文本：“自定义”，字体大小：40，字体颜色：“#00ff00”，边框：10，宽度：200，高度：100，前景颜色：“#03a9f4”，背景颜色：“#f441a5”，流光颜色：“#ffeb3b”，clickCallback:()=>{AlertDialog.show({message:'你点击了自定义按钮',autoCancel:true})}}})}.width('100%').height('100%')}}6.总结使用组件后，主界面简洁明了。无需关注组件中的具体实现，简单参考即可搞定一个漂亮的流光按钮了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com。
