更多内容请访问：鸿蒙科技社区https://harmonyos.51cto.com，与华为官方共同打造】渐变色轮基于ArkUI——容器组件学习与分享（上）效果图欢迎页面线性渐变角度添加渐变RadialgradientcodefilestructureText1.线性渐变LinearGradient1。色轮的样式是一致的，所以我们可以使用装饰器@Component来自定义色轮。色轮中三个RGB滑块的样式也是一致的，所以也可以使用装饰器@Component来自定义RGB颜色滑块。@ComponentstructsetSlider{@StateinSetValue:number=128@Linkstr:stringprivatetext:stringprivatecolor:stringsexadecimal(number){//返回十六进制字符串letnum1=Math.floor(number/16)letnum2=Math.ceil(number-num1*16)returnthis.takeCharacter(num1)+this.takeCharacter(num2)}takeCharacter(number){//十进制转十六进制函数if(number<10){returnnumber.toString()}elseif(number==10){return'A'}elseif(number==11){return'B'}elseif(number==12){return'C'}elseif(number==13){return'D'}elseif(number==14){return'E'}else{return'F'}}build(){Row(){Text(this.text+':').width('8%').fontSize(22).fontColor(this.color)Slider({value:this.inSetValue,//当前进度条min:0,//设置最小值max:255,//设置最大值step:1,//设置Slider滑动跳转值,当当设置相应步长，Slider会间歇滑动。style:SliderStyle.OutSet//设置Slider的滑块样式，SliderStyle.OutSet表示滑块在滑轨上，SliderStyle.InSet表示滑块在滑轨内}).width('80%').blockColor(0xCCCCCC)//设置滑块的颜色.trackColor(Color.Black)//设置滑块的背景色.selectedColor(this.color)//设置滑块的滑动颜色.showSteps(false)//设置当前是否显示步长Longscalevalue.showTips(false)//设置滑动时是否显示气泡提示百分比.onChange((value:number)=>{//Slider滑动时触发事件回调this.inSetValue=value//value:当前进度值this.str=this.sexadecimal(value)})Text(this.inSetValue.toFixed(0)).width('12%').fontSize(22).fontColor(this.color)}}}BadgeBadge：新增事件徽章组件，在组件上提供事件信息展示能力。参数：根据值创建提醒。垂直居中右侧BadgePosition.RightTop：圆点显示在右上角（默认）BadgePosition.Left：圆点显示在左侧垂直居中maxCount：可选，最大消息数，只有maxCount+时才显示超过最大消息数，参数类型为number，即直接填入数字，默认为99可选，文字颜色，参数类型为Color，默认值Color.WhitefontSize：可选，文字大小，参数类型为数字或字符串，默认值为10badgeSize：必填，徽章大小，参数类型为数字或字符串badgeColor：可选，徽章颜色，颜色类型的参数，默认值为Color.Red根据字符串值创建提醒组件：required，提示内容的文本字符串，参数类型为：stringposition：可选，设置提示点的显示位置BadgePosition.Right:the圆点显示在右侧垂直居中BadgePosition.RightTop：圆点显示在右上角（默认）BadgePosition.Left：圆点显示在左侧垂直居中style：可选，Badge组件可以设置样式，支持文字颜色、字号、圆点颜色、大小颜色：可选，文字颜色，参数类型为Color，默认值为Color.WhitefontSize：可选，文字大小，参数类型为数字或字符串，默认值为10badgeSize：必填，徽章size,parameter类型为数字或字符串badgeColor:可选，徽章颜色，参数类型为Color，默认值为Color.Red使用装饰器@Component自定义色轮setcolorPlate.ets：@ComponentexportstructsetcolorPlate{privatestr:number=1@LinkinSetValue:number@StatestrR:string='80'@StatestrG:string='80'@StatestrB:string='80'@LinkstrColor:stringaboutToAppear(){setInterval(()=>{//返回RGB颜色this.strColor='#'+this.strR+this.strG+this.strB},200)}build(){Column(){Badge({value:'',style:{badgeSize:20,badgeColor:'#'+this.strR+this.strG+this.strB}}){Text('颜色'+this.str+'：#'+this.strR+this.strG+this.strB).fontSize(30).fontColor('#'+this.strR+this.strG+this.strB)}.width(280).height(50)setSlider({str:$strR,text:'R',color:'#FF0000'})setSlider({str:$strG,text:'G',color:'#00FF00'})setSlider({str:$strB,text:'B',color:'#0000FF'})Row(){Slider({//颜色断点位置的滑动条value:this.inSetValue*100,min:0,max:100,step:1,style:SliderStyle.OutSet}).width('80%').blockColor(0xCCCCCC).trackColor(Color.Black).selectedColor(this.strColor).showSteps(false).showTips(false).onChange((value:number)=>{this.inSetValue=parseFloat（值==0？'0'：值==100？'1':'0.'+value)})Text(this.inSetValue.toString()).width('14%').fontSize(24).fontColor(this.strColor)}}}}注意在三个中还需要颜色渐变模式、方向、位置、半径等滑块。由于不是所有的渐变模式都有它们，你需要使用装饰器@Component来自定义滑块setcolorPlate.ets：@ComponentexportstructsetSliderPoint{privatestr:stringprivatemax:number@Linknumber:numberbuild(){Row(){Text(this.str+':').width('18%').fontSize(22).fontColor('#A168FE')Slider({value:this.number,min:0,max:this.max,//滑块的最大值不同渐变模式所需的bar不一致，需要设置为变量step:1,style:SliderStyle.OutSet}).width('70%').blockColor(0xCCCCCC).trackColor(Color.Black)。selectedColor('#A168FE').showSteps(false).showTips(false).onChange((value:number)=>{this.number=value})Text(this.number.toFixed(0)).width('12%').fontSize(22).fontColor('#A168FE')}}}2.添加BacktoHome按钮组件通过Navigator容器组件为按钮Button添加路由功能。setreturnButton.ets：//importrouterfrom'@system.router';@ComponentexportstructsetreturnButton{@Stateactive:boolean=falsebuild(){Navigator({target:'',type:NavigationType.Back}){//target：指定跳转目标页面路径，NavigationType.Back：返回上一页或指定页面Button({type:ButtonType.Normal,stateEffect:true}){setText({str:'返回首页'})}。宽度(160).高度(60).borderRadius(10).borderColor('#A168FE').borderWidth(2).backgroundColor('#DEB0DF').margin(10).onClick(()=>{this.active=true})}.active(this.active)//当前路由组件是否激活，当激活时，对应的路由操作才会生效}}/*@ComponentexportstructsetreturnButton{build(){Button({type:ButtonType.Normal,stateEffect:true}){setText({str:'返回首页'})}.width(160).height(60).borderRadius(10).borderColor('#A168FE').borderWidth(2).backgroundColor('#DEB0DF').margin(10).onClick(()=>{router.back()})}}*/注意有两个线性渐变中的按钮，按钮除了文字不一致外其他样式都是一样的，所以使用装饰器@Component来自定义文字。setreturnButton.ets:@ComponentexportstructsetText{privatestr:stringbuild(){Text(this.str).fontFamily('Founder'sstyle').fontSize(32).fontWeight(800).fontColor('#FDEB82')}}3.添加线性渐变页面SwiperSwiper：滑动容器，提供切换子组件显示的能力参数：controller：可选，给组件绑定一个控制器，控制组件翻页，默认值为null，一般不填直接为Swiper容器组件的controller，可以将这个对象绑定到Swiper组件上，然后用它来控制翻页showNext():void:翻到下一页showPrevious():void:翻到上一页属性：index：设置当前显示在容器中的子组件的索引值，参数类型为number，默认值为0autoPlay：子组件是否自动播放，在自动播放状态下，导航点不能操作，参数类型为boolean，默认为falseinterval：使用autoplay时的播放时间间隔，单位为毫秒，参数类型为number，默认值为3000指标：是否启用导航点指示器，参数类型为boolean，默认值为trueloop：是否启用循环，参数类型为boolean，默认值为trueduration：子组件切换的动画时长，单位毫秒，参数类型为number，默认值为400vertical：是否垂直滑动，参数类型为boolean，默认值为falseitemSpace：设置子组件与子组件之间的间距，参数类型为Length，默认值为0。事件：onChange(index:number)=>void:当前显示组件的index发生变化时触发该事件。从“从路径名导入{结构名称}”导入定义组件。LinearGradient.ets：从'../util/setreturnButton.ets'导入{setreturnButton,setText};从'../util/setcolorPlate.ets'导入{setcolorPlate,setSliderPoint}@Entry@ComponentstructLinearGradient{privateswiperController:SwiperController=newSwiperController()@StateColor1:string='#808080'@StatePoint1:number=0.1@StateColor2:string='#808080'@StatePoint2:number=0.4@StateColor3:string='#808080'@StatePoint3:number=0.8@StateAngle:number=180build(){Column(){setreturnButton()Swiper(this.swiperController){setcolorPlate({strColor:$Color1,str:'一',inSetValue:$Point1})setcolorPlate({strColor:$Color2,str:'二',inSetValue:$Point2})setcolorPlate({strColor:$Color3,str:'三',inSetValue:$Point3})}.width('100%').height(250).borderRadius(10).borderColor('#A168FE').borderWidth(2).index(1).autoPlay(false).indicator(true).loop(false)setSliderPoint({str:'Angle',max:359,number:$Angle})Flex(){}.width('90%').height(300).margin(10).linearGradient({angle:this.Angle,colors:[[this.Color1,this.Point1],[this.Color2,this.Point2],[this.Color3,this.Point3]]})}.width('100%').height('100%')}}最后使用装饰器@Component自定义翻页按钮组件LinearGradient.ets：从'../util/setreturnButton.ets'导入{setreturnButton,setText};从'../util/setcolorPlate.ets'导入{setcolorPlate,setSliderPoint}@Entry@ComponentstructLinearGradient{privateswiperController:SwiperController=newSwiperController()@StateColor1:string='#808080'@StatePoint1:number=0.1@StateColor2:string='#808080'@StatePoint2:number=0.4@StateColor3:string='#808080'@StatePoint3:number=0.8@StateAngle:number=180build(){Column(){setreturnButton()Swiper(this.swiperController){setcolorPlate({strColor:$Color1,str:'一',inSetValue:$Point1})setcolorPlate({strColor:$Color2,str:'二',inSetValue:$Point2})setcolorPlate({strColor:$Color3,str:'三',inSetValue:$Point3})}.width('100%').height(250).borderRadius(10).borderColor('#A168FE').borderWidth(2).index(1).autoPlay(false).indicator(true).loop(false)Row(){setSliderButton({str:'上一个图像',swiperController:this.swiperController})setSliderButton({str:'下载设计',swiperController:this.swiperController})}setSliderPoint({str:'Angle',max:359,number:$Angle})Flex(){}.width('90%').height(300).margin(10).linearGradient({angle:this.角度，颜色：[[this.Color1,this.Point1],[this.Color2,this.Point2],[this.Color3,this.Point3]]})}.width('100%').height('100%')}}@ComponentstructsetSliderButton{privatestr:stringprivateswiperController:SwiperControllerbuild(){Button({type:ButtonType.Normal,stateEffect:true}){setText({str:this.str})}.width(160).height(60).borderRadius(10).borderColor('#A168FE').borderWidth(2).backgroundColor('#DEB0DF').margin(10).onClick(()=>{if(this.str=='Previouscolor'){this.swiperController.showPrevious()//翻到上一页}else{this.swiperController.showNext()//翻到下一页}})}}文章相关附件请点击下方原文链接前往下载https://harmonyos.51cto.com/resource/1573更多内容请访问：https://harmonyos.51cto.com，与华为共建的鸿蒙技术社区
