基于ArkUI的漸變色盤(pán)—容器組件的學(xué)習(xí)分享（下）
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
前言
【木棉花】基于ArkUI的漸變色盤(pán)——容器組件的學(xué)習(xí)分享(中)
效果圖
歡迎頁(yè)面線性漸變角度添加了漸變徑向漸變
代碼文件結(jié)構(gòu)
正文
一、角度漸變SweepGradient
1. 添加角度漸變頁(yè)面
Tabs
Tabs：一種可以通過(guò)頁(yè)簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁(yè)簽對(duì)應(yīng)一個(gè)內(nèi)容視圖
參數(shù)：
barPosition：非必填，指定頁(yè)簽位置來(lái)創(chuàng)建Tabs容器組件
- BarPosition.Start：vertical屬性方法設(shè)置為true時(shí)，頁(yè)簽位于容器左側(cè);vertical屬性方法設(shè)置為false時(shí)，頁(yè)簽位于容器頂部(默認(rèn))
- BarPosition.End：vertical屬性方法設(shè)置為true時(shí)，頁(yè)簽位于容器右側(cè);vertical屬性方法設(shè)置為false時(shí)，頁(yè)簽位于容器底部
index：非必填，指定初次初始頁(yè)簽索引，參數(shù)類(lèi)型為number，即直接填數(shù)字，默認(rèn)值為0
controller：非必填，設(shè)置Tabs控制器，默認(rèn)值為null，一般都直接不填的
對(duì)Tabs組件的控制器，用于控制Tabs組件進(jìn)行頁(yè)簽切換
changeIndex(value: number): void：控制Tabs切換到指定頁(yè)簽，index: 頁(yè)簽在Tabs里的索引值，索引值從0開(kāi)始
屬性：
vertical：是否為縱向Tab，參數(shù)類(lèi)型為boolean，默認(rèn)值為false
scrollable：是否可以通過(guò)左右滑動(dòng)進(jìn)行頁(yè)面切換，參數(shù)類(lèi)型為boolean，默認(rèn)值為true
barMode：TabBar布局模式
BarMode.Scrollable：TabBar使用實(shí)際布局寬度, 超過(guò)總長(zhǎng)度后可滑動(dòng)
BarMode.Fixed：所有TabBar平均分配寬度
barWidth：TabBar的寬度值，參數(shù)類(lèi)型為number，即直接填數(shù)字
barHeight：TabBar的高度值，參數(shù)類(lèi)型為number，即直接填數(shù)字
animationDuration：TabContent滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)，參數(shù)類(lèi)型為number，默認(rèn)值為200
事件：
onChange(callback: (index: number) => void)：Tab頁(yè)簽切換后觸發(fā)的事件
TabContent
TabContent：僅在Tabs中使用，對(duì)應(yīng)一個(gè)切換頁(yè)簽的內(nèi)容視圖
屬性：
tabBar：設(shè)置TabBar上顯示內(nèi)容，參數(shù)類(lèi)型：string
通過(guò) “import {結(jié)構(gòu)體名} 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坐標(biāo)', max:330, number:$PointX })
- setSliderPoint({ str:'Y坐標(biāo)', 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%')
- }
- }
二、徑向漸變RadialGradient
1. 添加徑向漸變頁(yè)面
List
List：列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類(lèi)數(shù)據(jù)，例如圖片和文本
參數(shù)：
space：非必填，列表項(xiàng)間距，參數(shù)類(lèi)型為number，即直接填數(shù)字，默認(rèn)值為0
initialIndex：非必填，設(shè)置當(dāng)前List初次加載時(shí)視口起始位置顯示的item，即顯示第一個(gè)item，如設(shè)置的序號(hào)超過(guò)了最后一個(gè)item的序號(hào)，則設(shè)置不生效，參數(shù)類(lèi)型為number，即直接填數(shù)字，默認(rèn)值為0
屬性：
listDirection：設(shè)置List組件排列方向
- Axis.Vertical：縱向排列(默認(rèn))
- Axis.Horizontal：橫向排列
editMode：聲明當(dāng)前List組件是否處于可編輯模式，參數(shù)類(lèi)型為boolean，默認(rèn)值為false，當(dāng)設(shè)置了true時(shí)，則為可以刪除該列表項(xiàng)
edgeEffect：滑動(dòng)效果
- EdgeEffect.Spring：彈性物理動(dòng)效，滑動(dòng)到邊緣后可以根據(jù)初始速度或通過(guò)觸摸事件繼續(xù)滑動(dòng)一段距離，松手后回彈(默認(rèn))
- EdgeEffect.None：滑動(dòng)到邊緣后無(wú)效果
chainAnimation：用于設(shè)置當(dāng)前l(fā)ist是否啟用鏈?zhǔn)铰?lián)動(dòng)動(dòng)效，開(kāi)啟后列表滑動(dòng)以及頂部和底部拖拽時(shí)會(huì)有鏈?zhǔn)铰?lián)動(dòng)的效果。鏈?zhǔn)铰?lián)動(dòng)效果：list內(nèi)的list-item間隔一定距離，在基本的滑動(dòng)交互行為下，主動(dòng)對(duì)象驅(qū)動(dòng)從動(dòng)對(duì)象進(jìn)行聯(lián)動(dòng)，驅(qū)動(dòng)效果遵循彈簧物理動(dòng)效。參數(shù)類(lèi)型為boolean，默認(rèn)值為false
事件：
onItemDelete(index: number) => boolean：列表項(xiàng)刪除時(shí)觸發(fā)
onScrollIndex(firstIndex: number, lastIndex: number) => void：當(dāng)前列表顯示的起始位置和終止位置發(fā)生變化時(shí)觸發(fā)
ListItem
ListItem：用來(lái)展示列表具體item，寬度默認(rèn)充滿List組件，必須配合List來(lái)使用
屬性：
sticky：設(shè)置ListItem吸頂效果
- Sticky.None：無(wú)吸頂效果(默認(rèn))
- Sticky.Normal：當(dāng)前item吸頂，滑動(dòng)消失
editable：聲明當(dāng)前ListItem元素是否可編輯，進(jìn)入編輯模式后可刪除，參數(shù)類(lèi)型為boolean，默認(rèn)值為false
Scroll
Scroll：可滾動(dòng)的容器組件，當(dāng)子組件的布局尺寸超過(guò)父組件的視口時(shí)，內(nèi)容可以滾動(dòng)
屬性：
scrollable：設(shè)置滾動(dòng)方法
- ScrollDirection.Horizontal：僅支持水平方向滾動(dòng)
- ScrollDirection.Vertical：僅支持豎直方向滾動(dòng)(默認(rèn))
- ScrollDirection.None：不可滾動(dòng)
scrollBar：設(shè)置滾動(dòng)條狀態(tài)
- Auto.Off：不顯示
- Auto.On：常駐顯示
- Auto.Auto：按需顯示(觸摸時(shí)顯示，2s后消失)(默認(rèn))
scrollBarColor：設(shè)置滾動(dòng)條的顏色，參數(shù)類(lèi)型為Color
scrollBarWidth：設(shè)置滾動(dòng)條的寬度，參數(shù)類(lèi)型為L(zhǎng)ength
事件：
onScroll(xOffset: number, yOffset: number) => void：滾動(dòng)事件回調(diào), 返回滾動(dòng)時(shí)水平、豎直方向偏移量
onScrollEdge(side: Edge) => void：滾動(dòng)到邊緣事件回調(diào)
onScrollEnd() => void：滾動(dòng)停止時(shí)事件回調(diào)
對(duì)于可滾動(dòng)容器組件的控制器，可以將此組件綁定至容器組件，然后通過(guò)它控制容器組件的滾動(dòng)
scroller.scrollTo：滑動(dòng)到指定位置
- xOffset：必填，水平滑動(dòng)偏移，參數(shù)類(lèi)型為L(zhǎng)ength
- yOffset：必填，豎直滑動(dòng)偏移，參數(shù)類(lèi)型為L(zhǎng)ength
- animation：非必填，動(dòng)畫(huà)配置：duration: 滾動(dòng)時(shí)長(zhǎng)設(shè)置;curve: 滾動(dòng)曲線設(shè)置
scroller.scrollEdge：滾動(dòng)到容器邊緣
- value：必填，指定滾動(dòng)到的邊緣位置，參數(shù)類(lèi)型為Edge
scroller.scrollPage：滾動(dòng)到下一頁(yè)或者上一頁(yè)
- next：必填，是否向下翻頁(yè)，參數(shù)類(lèi)型為boolean，true表示向下翻頁(yè)，false表示向上翻頁(yè)
scroller.currentOffset：返回當(dāng)前的滾動(dòng)偏移量，返回值xOffset: number水平滑動(dòng)偏移，yOffset: number豎直滑動(dòng)偏移
scroller.scrollToIndex：滑動(dòng)到指定Index
- value：必填，要滑動(dòng)到的列表項(xiàng)在列表中的索引值，參數(shù)類(lèi)型為number，即直接填數(shù)字
通過(guò) “import {結(jié)構(gòu)體名} 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坐標(biāo)', max:330, number:$PointX })
- setSliderPoint({ str:'Y坐標(biāo)', 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)
- }
- }
文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載
https://harmonyos.51cto.com/resource/1572
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
