WaterFlow
瀑布流容器,由“行”和“列”分割的單元格所組成,通過容器自身的排列規則,將不同大小的“項目”自上而下,如瀑布般緊密布局。
說明:
該組件從API Version 9 開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。
子組件
包含[FlowItem]子組件。
說明:
WaterFlow子組件的visibility屬性設置為None時不顯示,但該子組件周圍的gap還會生效。
接口
WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
參數:
參數名 | 參數類型 | 必填 開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md ]。 | 參數描述 |
---|---|---|---|
footer | [CustomBuilder] | 否 | 設置WaterFlow尾部組件。 |
scroller | [Scroller] | 否 | 可滾動組件的控制器,與可滾動組件綁定。 目前瀑布流僅支持Scroller組件的scrollToIndex接口。 |
屬性
除支持[通用屬性]外,還支持以下屬性:
名稱 | 參數類型 | 描述 |
---|---|---|
columnsTemplate | string | 設置當前瀑布流組件布局列的數量,不設置時默認1列。 例如, '1fr 1fr 2fr' 是將父組件分3列,將父組件允許的寬分為4等份,第一列占1份,第二列占1份,第三列占2份。并支持[auto-fill]。 默認值:'1fr' |
rowsTemplate | string | 設置當前瀑布流組件布局行的數量,不設置時默認1行。 例如, '1fr 1fr 2fr'是將父組件分三行,將父組件允許的高分為4等份,第一行占1份,第二行占一份,第三行占2份。并支持[auto-fill]。 默認值:'1fr' |
itemConstraintSize | [ConstraintSizeOptions] | 設置約束尺寸,子組件布局時,進行尺寸范圍限制。 |
columnsGap | Length | 設置列與列的間距。 默認值:0 |
rowsGap | Length | 設置行與行的間距。 默認值:0 |
layoutDirection | [FlexDirection] | 設置布局的主軸方向。 默認值:FlexDirection.Column |
enableScrollInteraction10+ | boolean | 設置是否支持滾動手勢,當設置為false時,無法通過手指或者鼠標滾動,但不影響控制器的滾動接口。 默認值:true |
nestedScroll10+ | [NestedScrollOptions] | 嵌套滾動選項。設置向前向后兩個方向上的嵌套滾動模式,實現與父組件的滾動聯動。 |
friction10+ | number | [Resource] |
layoutDirection優先級高于rowsTemplate和columnsTemplate。根據layoutDirection設置情況,分為以下三種設置模式:
- layoutDirection設置縱向布局(FlexDirection.Column 或 FlexDirection.ColumnReverse)
此時columnsTemplate有效(如果未設置,取默認值)。例如columnsTemplate設置為"1fr 1fr"、rowsTemplate設置為"1fr 1fr 1fr"時,瀑布流組件縱向布局,輔軸均分成橫向2列。 - layoutDirection設置橫向布局(FlexDirection.Row 或 FlexDirection.RowReverse)
此時rowsTemplate有效(如果未設置,取默認值)。例如columnsTemplate設置為"1fr 1fr"、rowsTemplate設置為"1fr 1fr 1fr"時,瀑布流組件橫向布局,輔軸均分成縱向3列。 - layoutDirection未設置布局方向
布局方向為layoutDirection的默認值:FlexDirection.Column,此時columnsTemplate有效。例如columnsTemplate設置為"1fr 1fr"、rowsTemplate設置為"1fr 1fr 1fr"時,瀑布流組件縱向布局,輔軸均分成橫向2列。
事件
除支持[通用事件]外,還支持以下事件:
名稱 | 功能描述 |
---|---|
onReachStart(event: () => void) | 瀑布流組件到達起始位置時觸發。 |
onReachEnd(event: () => void) | 瀑布流組件到底末尾位置時觸發。 |
onScrollFrameBegin10+(event: (offset: number, state: ScrollState) => { offsetRemain }) | 瀑布流開始滑動時觸發,事件參數傳入即將發生的滑動量,事件處理函數中可根據應用場景計算實際需要的滑動量并作為事件處理函數的返回值返回,瀑布流將按照返回值的實際滑動量進行滑動。 - offset:即將發生的滑動量,單位vp。 - state:當前滑動狀態。 - offsetRemain:實際滑動量,單位vp。 觸發該事件的條件:手指拖動WaterFlow、WaterFlow慣性劃動時每幀開始時觸發;List超出邊緣回彈、使用滾動控制器的滾動不會觸發。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
auto-fill說明
WaterFlow的columnsTemplate、rowsTemplate屬性的auto-fill僅支持以下格式:
repeat(auto-fill, track-size)
其中repeat、auto-fill為關鍵字。track-size為行高或者列寬,支持的單位包括px、vp、%或有效數字,track-size至少包括一個有效行高或者列寬。
示例
// WaterFlowDataSource.ets
// 實現IDataSource接口的對象,用于瀑布流組件加載數據
export class WaterFlowDataSource implements IDataSource {
private dataArray: number[] = []
private listeners: DataChangeListener[] = []
constructor() {
for (let i = 0; i < 100; i++) {
this.dataArray.push(i)
}
}
// 獲取索引對應的數據
public getData(index: number): number {
return this.dataArray[index]
}
// 通知控制器數據重新加載
notifyDataReload(): void {
this.listeners.forEach(listener = > {
listener.onDataReloaded()
})
}
// 通知控制器數據增加
notifyDataAdd(index: number): void {
this.listeners.forEach(listener = > {
listener.onDataAdd(index)
})
}
// 通知控制器數據變化
notifyDataChange(index: number): void {
this.listeners.forEach(listener = > {
listener.onDataChange(index)
})
}
// 通知控制器數據刪除
notifyDataDelete(index: number): void {
this.listeners.forEach(listener = > {
listener.onDataDelete(index)
})
}
// 通知控制器數據位置變化
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener = > {
listener.onDataMove(from, to)
})
}
// 獲取數據總數
public totalCount(): number {
return this.dataArray.length
}
// 注冊改變數據的控制器
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
// 注銷改變數據的控制器
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener)
if (pos >= 0) {
this.listeners.splice(pos, 1)
}
}
// 增加數據
public Add1stItem(): void {
this.dataArray.splice(0, 0, this.dataArray.length)
this.notifyDataAdd(0)
}
// 在數據尾部增加一個元素
public AddLastItem(): void {
this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
this.notifyDataAdd(this.dataArray.length - 1)
}
// 在指定索引位置增加一個元素
public AddItem(index: number): void {
this.dataArray.splice(index, 0, this.dataArray.length)
this.notifyDataAdd(index)
}
// 刪除第一個元素
public Delete1stItem(): void {
this.dataArray.splice(0, 1)
this.notifyDataDelete(0)
}
// 刪除第二個元素
public Delete2ndItem(): void {
this.dataArray.splice(1, 1)
this.notifyDataDelete(1)
}
// 刪除最后一個元素
public DeleteLastItem(): void {
this.dataArray.splice(-1, 1)
this.notifyDataDelete(this.dataArray.length)
}
// 重新加載數據
public Reload(): void {
this.dataArray.splice(1, 1)
this.dataArray.splice(3, 2)
this.notifyDataReload()
}
}
// Index.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'
@Entry
@Component
struct WaterflowDemo {
@State minSize: number = 80
@State maxSize: number = 180
@State fontSize: number = 24
@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
scroller: Scroller = new Scroller()
datasource: WaterFlowDataSource = new WaterFlowDataSource()
private itemWidthArray: number[] = []
private itemHeightArray: number[] = []
// 計算flow item寬/高
getSize() {
let ret = Math.floor(Math.random() * this.maxSize)
return (ret > this.minSize ? ret : this.minSize)
}
// 保存flow item寬/高
getItemSizeArray() {
for (let i = 0; i < 100; i++) {
this.itemWidthArray.push(this.getSize())
this.itemHeightArray.push(this.getSize())
}
}
aboutToAppear() {
this.getItemSizeArray()
}
@Builder
itemFoot() {
Column() {
Text(`Footer`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 })
}
}
build() {
Column({ space: 2 }) {
WaterFlow() {
LazyForEach(this.datasource, (item: number) = > {
FlowItem() {
Column() {
Text("N" + item).fontSize(12).height('16')
Image('res/waterFlowTest(' + item % 5 + ').jpg')
.objectFit(ImageFit.Fill)
.width('100%')
.layoutWeight(1)
}
}
.onAppear(() = > {
// 即將觸底時提前增加數據
if (item + 20 == this.datasource.totalCount()) {
for (let i = 0; i < 100; i++) {
this.datasource.AddLastItem()
}
}
})
.width('100%')
.height(this.itemHeightArray[item % 100])
.backgroundColor(this.colors[item % 5])
}, (item: string) = > item)
}
.columnsTemplate("1fr 1fr")
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width('100%')
.height('100%')
}
}
}
審核編輯 黃宇
-
組件
+關注
關注
1文章
512瀏覽量
17813 -
鴻蒙
+關注
關注
57文章
2339瀏覽量
42812
發布評論請先 登錄
相關推薦
評論