更多内容请访问：鸿蒙科技社区https://harmonyos.51cto.com，与华为官方共同打造】渐变色基于ArkUI的wheel——容器组件学习分享（中）效果图欢迎页线性渐变角度添加渐变径向渐变代码文件结构文本1.角度渐变SweepGradient1.添加角度渐变页面TabsTabs：一种可以通过标签切换内容视图的容器组件，每个标签对应一个内容视图参数：barPosition：可选，指定标签位置创建标签容器组件BarPosition.Start：当vertical属性方法设置为true，选项卡位于容器的左侧；当vertical属性方法设置为false时，tab在容器顶部（默认）BarPosition.End：当vertical属性方法设置为true时，tab在容器右侧；当vertical属性方法设置为false时，tab在容器底部的Index：可选，指定初始初始tab索引，参数类型为number，即直接填入数字，默认值is0controller：可选，设置Tabs控制器，默认值为null，一般不要直接填写Tabs组件的controller，用于控制Tabs组件的tab切换changeIndex(value:number):void:控制Tabs切换到指定的tab，index：tab在Tabs中的索引值，index值从0开始：vertical：是否为垂直tab，参数类型为boolean，默认值为falscrollable：是否可以左右滑动切换页面，参数类型为boolean，默认值为true怀特TabBar的h值，参数类型为number，即直接填写数字barHeight：TabBar的高度值，参数类型为number，即直接填写数字animationDuration:TabContent的时长滑动动画，参数类型为number，默认值为200Events:onChange(callback:(iindex:number)=>void):Tab页面切换后触发的事件TabContentTabContent:仅在Tabs中使用，对应一个用于切换tab的contentview属性：tabBar:设置TabBar显示的内容，参数类型：stringvia《import{structurename}frompathname》引入自定义组件SweepGradient.ets：import{setreturnButton}from'../util/setreturnButton.ets';import{setcolorPlate,setSliderPoint}from'../util/setcolorPlate.ets'@Entry@ComponentstructSweepGradient{privatecontroller:TabsController=newTabsController()@StateColor1:string='#808080'@StatePoint1:number=0.1@StateColor2:string='#808080'@StatePoint2:number=0.4@StateColor3:string='#808080'@StatePoint3:number=0.8@StatePointX:number=165@StatePointY:number=165build(){Column(){setreturnButton()Tabs({barPosition:BarPosition.Start,index:1,controller:this.controller}){TabContent(){setcolorPlate({strColor:$Color1,str:'一',inSetValue:$Point1})}.tabBar('颜色一').borderColor('#A168FE').borderWidth(2)TabContent(){setcolorPlate({strColor:$Color2,str:'二',inSetValue:$Point2})}.tabBar('颜色二').borderColor('#A168FE').borderWidth(2)TabContent(){setcolorPlate({strColor:$Color3,str:'三',inSetValue:$Point3})}.tabBar('颜色三').borderColor('#A168FE').borderWidth(2)}.vertical(false).scrollable(true).barMode(BarMode.Fixed).barWidth(330).barHeight(50).animationDuration(400).width('98%').height(260).borderRadius(10).borderColor('#A168FE').borderWidth(2)setSliderPoint({str:'X坐标',max:330,number:$PointX})setSliderPoint({str:'Y坐标',max:330,number:$PointY})Flex(){}.width(330).height(330).margin(10).sweepGradient({center:[this.PointX,this.PointY],start:0,end:359,colors:[[this.Color1,this.Point1],[this.Color2,this.Point2],[this.Color3,this.Point3]]})}.width('100%').height('100%')}}2.径向渐变RadialGradient1。添加径向渐变页面ListList：List包含一系列相同宽度的列表项适用于相似数据的连续、多行展示，比如图片、文字参数：空格：可选，列表项之间的距离，参数类型为数字，即直接填入数字，默认值为0initialIndex:可选，设置当前List第一次加载时显示在视口起始位置的item，即显示第一个item。如果设置的序列号超过了最后一项的序列号，设置将不会生效。参数类型为number，即直接填入数字，默认为0。属性：listDirection：设置List组件排列方向Axis.Vertical：垂直排列（默认）Axis.Horizo??ntal：水平排列editMode：声明当前List组件是否处于可编辑状态，参数类型为boolean，默认值为false，当设置为true时，则可以删除该列表项edgeEffect：滑动效果EdgeEffect.Spring：弹性物理运动效果，滑动到后边缘，可以根据初始速度或通过触摸事件继续滑动一定距离，松手后反弹（默认）EdgeEffect.None：滑动到边缘后无效果chainAnimation：用于设置是否当前列表启用了链式链接动画。启用列表后，滑动列表并在顶部和底部拖动时会有链式联动效果。链式联动效果：列表中的list-item之间相隔一定的距离。在基本的滑动交互行为下，主动对象带动从对象进行联动，驱动效果遵循弹簧物理运动。参数类型为boolean，默认为false事件：onItemDelete(index:number)=>boolean:删除列表项时触发onScrollIndex(firstIndex:number,lastIndex:number)=>void:起始位置和结束位置当前列表显示的位置发生变化时触发ListItem。ListItem：用于显示列表中的特定项目。宽度默认用List组件填充。它必须与列表一起使用。属性：sticky：设置ListItem的吸顶效果Sticky.None：无吸顶效果（默认）Sticky.Normal：当前项Ceiling，滑动消失editable：声明当前ListItem元素是否可编辑，进入编辑后可删除mode，参数类型为boolean，默认值为falseScrollScroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时属性：scrollable：设置滚动方式ScrollDirection.Horizo??ntal：只支持水平滚动ScrollDirection.Vertical：只支持垂直滚动（默认）ScrollDirection.None：不可滚动scrollBar：设置滚动条的状态Auto.Off：不显示Auto.On：永久显示Auto.Auto：按需显示（触摸时显示,2s后消失)(默认)scrollBarColor:设置滚动条的颜色,参数类型为ColorscrollBarWidth:设置滚动条的宽度,参数类型isLength事件：onScroll(xOffset:number,yOffset:number)=>void:滚动事件回调，返回滚动时的水平和垂直偏移onScrollEdge(side:Edge)=>void:滚动到边缘事件回调onScrollEnd()=>void:滚动停止时的事件回调对于可滚动的容器组件的控制器，可以将此组件绑定到容器组件上，然后用它来控制容器组件的滚动scroller.scrollTo:滑动到指定位置xOffset:必填，水平滑动偏移量，参数类型为LengthyOffset：必填，垂直滑动偏移量，参数类型为Lengthanimation：非必填，动画配置：duration：滚动时长设置；curve:滚动曲线设置scroller.scrollEdge:滚动到容器边缘value:必填，指定滚动到边缘位置，参数类型为Edgescroller.scrollPage:滚动到下一页或上一页next:必填，是否翻转向下翻页，参数类型为boolean，true表示向下翻页，false表示向上翻页scroller.currentOffset：返回当前滚动偏移量，返回值xOffset：number水平滑动偏移量，yOffset：number垂直滑动偏移量scroller.scrollToIndex:滑动到指定位置Index值：必填，滑动到的列表项在列表中的索引值，参数类型为数字，即直接填入数字通过"import"导入自定义组件{结构名称}来自路径名称”RadialGradient.ets：import{setreturnButton}from'../util/setreturnButton.ets';import{setcolorPlate,setSliderPoint}from'../util/setcolorPlate.ets'@Entry@ComponentstructRadialGradient{scroller:Scroller=newScroller()@StateColor1:string='#808080'@StatePoint1:number=0.1@StateColor2:string='#808080'@StatePoint2:number=0.4@StateColor3:string='#808080'@StatePoint3:number=0.8@StatePointX:number=165@StatePointY:number=165@StateRadius:number=165build(){Scroll(this.scroller){Column(){setreturnButton()List({space:10,initialIndex:0}){ListItem(){setcolorPlate({strColor:$Color1,str:'一',inSetValue:$Point1})}.borderRadius(10).borderColor('#A168FE').borderWidth(2)ListItem(){setcolorPlate({strColor:$Color2,str:'二',inSetValue:$Point2})}.borderRadius(10).borderColor('#A168FE').borderWidth(2)ListItem(){setcolorPlate({strColor:$Color3,str:'三',inSetValue:$Point3})}.borderRadius(10).borderColor('#A168FE').borderWidth(2)}.listDirection(Axis.Vertical).divider({strokeWidth:2,c颜色:'#808080',startMargin:10,endMargin:10}).edgeEffect(EdgeEffect.None).chainAnimation(true).editMode(false).width('98%').height(500).padding({top:5,bottom:5})setSliderPoint({str:'X坐标',max:330,number:$PointX})setSliderPoint({str:'Y坐标',max:330,number:$PointY})setSliderPoint({str:'radius',max:330,number:$Radius})Flex(){}.width(330).height(330).margin(10).radialGradient({center:[this.PointX,this.PointY],半径:this.Radius,颜色:[[this.Color1,this.Point1],[this.Color2,this.Point2],[this.Color3,this.Point3]]})}}.width('100%').height('100%').scrollable(ScrollDirection.Vertical).scrollBar(BarState.Auto).scrollBarColor(Color.Gray).scrollBarWidth(30)}}文章相关附件请点击原文链接如下去下载https://harmonyos.51cto.com/resource/1572更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com与华为官方共建
