使用display.on('foldDisplayModeChange')监听折叠屏折叠与展开，动态调整WaterFlow瀑布流布局的列数。
import { display } from '@kit.ArkUI';
import { cryptoFramework } from '@kit.CryptoArchitectureKit';
enum FooterState {
Loading = 0,
End = 1
}
@Entry
@Component
struct WaterFlowDemo {
private minSize: number = 80;
private maxSize: number = 180;
@State colors: number[] = [0xD1D1D6, 0xE5E5EA, 0xFFFFFF, 0x808080];
@State footerState: FooterState = FooterState.Loading;
scroller: Scroller = new Scroller();
dataSource: WaterFlowDataSource = new WaterFlowDataSource();
private itemWidthArray: number[] = [];
private itemHeightArray: number[] = [];
@State columnsTemplate: string = '1fr 1fr';
// 计算FlowItem宽/高
getSize() {
let rand = cryptoFramework.createRandom();
// 设置生成随机数的字节长度为1
let randData = rand.generateRandomSync(1);
// 自定义范围(0-10之内)
let num: number = randData.data[0] / 255;
let ret = Math.floor(num * this.maxSize);
return (ret > this.minSize ? ret : this.minSize);
}
// 设置FlowItem的宽/高数组
setItemSizeArray() {
for (let i = 0; i < 100; i++) {
this.itemWidthArray.push(this.getSize());
this.itemHeightArray.push(this.getSize());
}
}
aboutToAppear() {
let callback: Callback<display.FoldDisplayMode> = (data: display.FoldDisplayMode) => {
// 监听到是折叠屏展开态
if (data === 1) {
// 修改瀑布流列数为4列，展示更多数据
this.columnsTemplate = '1fr 1fr 1fr 1fr';
}
};
display.on('foldDisplayModeChange', callback);
this.setItemSizeArray();
}
@Builder
itemFoot() {
Column() {
if (this.footerState === FooterState.Loading) {
Text(`加载中...`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 });
} else if (this.footerState === FooterState.End) {
Text(`到底啦...`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 });
} else {
Text(`Footer`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 });
}
};
}
build() {
Column({ space: 2 }) {
WaterFlow({ footer: this.itemFoot() }) {
LazyForEach(this.dataSource, (item: number) => {
FlowItem() {
Column() {
Text('N' + item).fontSize(12).height('50');
};
}
.width('100%')
.height(this.itemHeightArray[item % 100])
.backgroundColor(this.colors[item % 4]);
}, (item: string) => item);
}
.columnsTemplate(this.columnsTemplate)
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width('100%')
.height('100%')
// 触底加载数据
.onReachEnd(() => {
console.info('onReachEnd');
if (this.dataSource.totalCount() > 200) {
this.footerState = FooterState.End;
return;
}
setTimeout(() => {
for (let i = 0; i < 100; i++) {
this.dataSource.addLastItem();
}
}, 1000);
});
};
}
}
// 实现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);
});
}
//通知控制器数据批量修改
notifyDatasetChange(operations: DataOperation[]): void {
this.listeners.forEach(listener => {
listener.onDatasetChange(operations);
});
}
// 获取数据总数
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 deleteItem(index: number): void {
this.dataArray.splice(index, 1);
this.notifyDataDelete(index);
}
// 重新加载数据
public reload(): void {
this.dataArray.splice(1, 1);
this.dataArray.splice(3, 2);
this.notifyDataReload();
}
// 在数据尾部增加count个元素
public addNewItems(count: number): void {
let len = this.dataArray.length;
for (let i = 0; i < count; i++) {
this.dataArray.push(this.dataArray[len - 1] + i + 1);
this.notifyDataAdd(this.dataArray.length - 1);
}
}
// 刷新所有元素
public refreshItems(): void {
let newDataArray: number[] = [];
for (let i = 0; i < 100; i++) {
newDataArray.push(this.dataArray[0] + i + 1000);
}
this.dataArray = newDataArray;
this.notifyDataReload();
}
}