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