代码拉取完成,页面将自动刷新
var nextID: number = 1;
@ObservedV2
class GridArrayHolder {
@Trace arr: Array<ReusableData> = [];
constructor(count: number) {
for (let i = 0; i < count; i++) {
this.arr.push(new ReusableData(i % 2 == 0 ? 13*i : 10*i));
}
}
}
@ObservedV2
class ReusableData {
@Trace val: number;
@Trace id: number;
constructor(x?: number) {
this.val = x || 1;
this.id = nextID++;
}
}
@ComponentV2
struct ReusableFlowItem {
@Require @Param reusableItem: ReusableData;
@Param type: string = "";
@Param index: number = -1;
aboutToAppear() {
console.error(`ReusableFlowItem aboutToAppear, reusableItem.val: ${this.reusableItem.val}`);
}
build() {
Row({ space: 5 }) {
Button("-").height(35).width(35)
.onClick(() => {
console.error(`ReusableFlowItem - clicked, current val: ${this.reusableItem.val}`);
this.reusableItem.val -= 10;
})
Text(`#${this.index} - ${this.reusableItem.val} (ID: ${this.reusableItem.id})`).fontSize(20).fontColor(Color.White)
Button("+").height(35).width(35)
.onClick(() => {
console.error(`ReusableFlowItem + clicked, current val: ${this.reusableItem.val}`);
this.reusableItem.val += 10;
})
}
}
}
@Entry
@ComponentV2
struct ParentGrid {
@Local arrayHolder: GridArrayHolder = new GridArrayHolder(3);
scroller: Scroller = new Scroller();
@Local totalCount:number = this.arrayHolder.arr.length;
build() {
Column({ space: 5 }) {
Grid(this.scroller) {
Repeat(this.arrayHolder.arr)// @ts-ignore
.virtualScroll({ totalCount: this.totalCount })
.key((item, index) => `${item.id}`)
.each((ri) => {
GridItem() {
Text("ERROR")
}
})
.template("small", (ri) => {
GridItem() {
ReusableFlowItem({ reusableItem: ri.item, type: "small", index: ri.index })
.backgroundColor(Color.Red)
.height(75)
}
})
.template("ok", (ri) => {
GridItem() {
ReusableFlowItem({ reusableItem: ri.item, type: "ok", index: ri.index })
.backgroundColor(Color.Green)
.height(125)
}
})
.template("big", (ri) => {
GridItem() {
ReusableFlowItem({ reusableItem: ri.item, type: "big", index: ri.index })
.backgroundColor(Color.Blue)
.height(175)
}
})
.templateId((item, index) => {
console.error(`templateId for index ${index}: item.val ${item.val}`);
return item.val >= 100 ? "big" : item.val >= 75 ? "ok" : "small";
})
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
Button('next page')
.onClick(() => {
this.scroller.scrollPage({ next: true })
})
Button(`push`)
.onClick(() => {
console.error("HENNAN DEBUG push");
this.arrayHolder.arr.push(new ReusableData(10*nextID));
this.totalCount++;
})
Button(`unshift`)
.onClick(() => {
console.error("HENNAN DEBUG unshift");
this.arrayHolder.arr.unshift(new ReusableData(10*nextID));
this.totalCount++;
})
Button(`reverse`)
.onClick(() => {
console.error("HENNAN DEBUG reverse");
this.arrayHolder.arr.reverse();
})
Button(`swap`)
.onClick(() => {
console.error("HENNAN DEBUG swap");
const tmp = this.arrayHolder.arr[0]
this.arrayHolder.arr[0] = this.arrayHolder.arr[2];
this.arrayHolder.arr[2] = tmp;
})
Button(`+100`)
.onClick(() => {
console.error("HENNAN DEBUG +100");
this.arrayHolder.arr.forEach(i => {
i.val += 100;
})
})
}.width('100%').margin({ top: 5 })
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。