![](https://s5-media.51cto.com/ost/pc/static/noavatar.gif)
回复
【本文正在参与优质创作者激励】
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)
欢迎页面 | 线性渐变 | 角度添加了渐变 | 径向渐变 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Tabs:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图
参数:
对Tabs组件的控制器,用于控制Tabs组件进行页签切换
属性:
事件:
TabContent:仅在Tabs中使用,对应一个切换页签的内容视图
属性:
通过 “import {结构体名} from 路径名” 引入自定义组件。
SweepGradient.ets:
import { setreturnButton } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'
@Entry
@Component
struct SweepGradient {
private controller: TabsController = new TabsController()
@State Color1:string = '#808080'
@State Point1:number = 0.1
@State Color2:string = '#808080'
@State Point2:number = 0.4
@State Color3:string = '#808080'
@State Point3:number = 0.8
@State PointX:number = 165
@State PointY:number = 165
build() {
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%')
}
}
List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本
参数:
属性:
事件:
ListItem:用来展示列表具体item,宽度默认充满List组件,必须配合List来使用
属性:
Scroll:可滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动
属性:
事件:
对于可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动
通过 “import {结构体名} from 路径名” 引入自定义组件。
RadialGradient.ets:
import { setreturnButton } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'
@Entry
@Component
struct RadialGradient {
scroller: Scroller = new Scroller()
@State Color1:string = '#808080'
@State Point1:number = 0.1
@State Color2:string = '#808080'
@State Point2:number = 0.4
@State Color3:string = '#808080'
@State Point3:number = 0.8
@State PointX:number = 165
@State PointY:number = 165
@State Radius:number = 165
build() {
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, color: '#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:'半径', max:330, number:$Radius })
Flex(){}
.width(330)
.height(330)
.margin(10)
.radialGradient({
center: [this.PointX, this.PointY],
radius: this.Radius,
colors: [[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)
}
}
更多资料请关注我们的项目 : Awesome-Harmony_木棉花
本项目会长期更新 ,希望随着鸿蒙一同成长变强的既有我们,也有正在看着这个项目的你。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。