HarmonyOS 鸿蒙Next Grid组件无法实现懒加载
HarmonyOS 鸿蒙Next Grid组件无法实现懒加载
1、Scroll组件中嵌套List组件，List组件加载第一层懒加载数据源；
2、List组件中嵌套Grid组件，Grid组件加载第二层懒加载数据源。
诉求:实现Grid组件懒加载、Grid组件自适应高度且不允许滚动。
2 回复
参考如下代码试试
// MyDataSource类实现IDataSource接口
class MyDataSource implements IDataSource {
private dataArray: number[] = [];
public pushData(data: number): void {
this.dataArray.push(data);
}
// 数据源的数据总量
public totalCount(): number {
return this.dataArray.length;
}
// 返回指定索引位置的数据
public getData(index: number): number {
return this.dataArray[index];
}
registerDataChangeListener(listener: DataChangeListener): void {
}
unregisterDataChangeListener(listener: DataChangeListener): void {
}
}
@Entry
@Component
struct Page12 {
// 数据源
private data: MyDataSource = new MyDataSource();
scroller: Scroller = new Scroller()
aboutToAppear() {
for (let i = 1; i < 100; i++) {
this.data.pushData(i);
}
}
build() {
Scroll(this.scroller) {
Column({ space: 5 }) {
List() {
ListItem() {
Column() {
Grid() {
LazyForEach(this.data, (item: number, index: number) => {
GridItem() {
// 使用可复用自定义组件
ReusableChildComponent({ item: item })
.onAppear(() => {
console.log('ReusableChildComponent--1--' + index)
})
}
}, (item: number) => item.toString())
}
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.cachedCount(2) // 设置GridItem的缓存数量
.columnsTemplate('1fr 1fr 1fr')
.constraintSize({ minHeight: 200, maxHeight: '150%' })
.columnsGap(10)
.rowsGap(10)
.margin(10)
.backgroundColor(0xFAEEE0)
}
}
.margin({
bottom: 20
})
ListItem() {
Column() {
Grid() {
LazyForEach(this.data, (item: number, index: number) => {
GridItem() {
// 使用可复用自定义组件
ReusableChildComponent({ item: item })
.onAppear(() => {
console.log('ReusableChildComponent--2--' + index)
})
}
}, (item: number) => item.toString())
}
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.cachedCount(2) // 设置GridItem的缓存数量
.columnsTemplate('1fr 1fr 1fr')
.constraintSize({ minHeight: 200, maxHeight: '100%' })
.columnsGap(10)
.rowsGap(10)
.margin(10)
.backgroundColor(0xFAEEE0)
}
}
// .constraintSize({ minHeight: 200, maxHeight: '100%' })
}
// .layoutWeight(1)
.cachedCount(3)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.width('100%')
}
.height('100%')
.width('100%')
}
}
}
// 自定义组件被@Reusable装饰器修饰，即标志其具备组件复用的能力
@Reusable
@Component
struct ReusableChildComponent {
@State item: number = 0;
// aboutToReuse从复用缓存中加入到组件树之前调用，可在此处更新组件的状态变量以展示正确的内容
// aboutToReuse参数类型已不支持any，这里使用Record指定明确的数据类型。Record用于构造一个对象类型，其属性键为Keys，属性值为Type
aboutToReuse(params: Record<string, number>) {
this.item = params.item;
}
build() {
Column() {
Image($r('app.media.startIcon'))
.objectFit(ImageFit.Fill)
.layoutWeight(1)
Text(`图片${this.item}`)
.fontSize(16)
.textAlign(TextAlign.Center)
}
.width('100%')
.height(120)
.backgroundColor(0xF9CF93)
}
}
首先自适应高度这件事情就是依赖全展开的，其次懒加载和全展开这两件事情是相悖的，要想通过子组件撑开，就不能懒加载，反之亦然
懒加载必然是Grid的大小比GridItem的总高度小，才会用懒加载分段加载数据，
针对HarmonyOS 鸿蒙Next Grid组件无法实现懒加载的问题，以下是一些可能的原因及解决方法：
-
检查LazyForEach使用：
- 确保在Grid组件中正确使用了LazyForEach进行懒加载。LazyForEach应该按需加载数据，并在每次迭代过程中创建相应的组件。
-
配置cachedCount：
- 设置cachedCount属性以控制预加载的GridItem数量。这有助于在滑动时减少白块现象，同时保持较好的性能。
-
检查Grid布局设置：
- 确保Grid布局设置正确，没有阻碍懒加载的实现。例如，检查是否有不必要的动画效果或预加载逻辑。
-
组件复用：
- 利用组件复用技术，通过回收和复用已经创建的组件对象，降低组件短时间内频繁创建和销毁的开销。
-
代码审查：
- 仔细检查代码，确保没有逻辑错误或配置错误导致懒加载失效。
如果以上方法均无法解决问题，可能是由于更复杂的系统或软件冲突导致的。此时，建议直接联系鸿蒙系统的官方客服团队以获取专业的技术支持。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
