Grid组件性能问题有哪些?
以下是宫格模式布局代码,LazyForEach以及自定义组件重用代码都已添加。
测试条件:书架数据800条以上
1、快速滑动出现卡顿感,从最底部极速往上滑加载图片时图片显示占位图并卡住不动;
2、滑动到页面最底部,打开最后一本书籍进入阅读器,再从阅读器返回(会更新书籍打开时间重新排序),此时UI会卡住2-3s,并阻塞用户操作。
测试时,发现如果注释掉BookShelfHeaderView() 和 BookShelfFooterView() 这两个GridItem,则不会出现第2个问题,故推测是设置 columnStart 和 columnEnd这两个属性导致的排版问题。
@Builder
GridLayout() {
Grid(this.scroller) {
if (!this.isManaging) {
GridItem() {
BookShelfHeaderView()
}
.columnStart(0)
.columnEnd(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 4 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 3 : 2)
}
LazyForEach(this.viewModel.bookData, (item: QMBook, index: number) => {
GridItem() {
BookShelfGridCell({
viewModel: this.viewModel,
book: item,
index: index
}).reuseId('BookShelfGridCell')
}
}, (item: Book, index: number) => JSON.stringify(item) + index)
if (!this.isManaging) {
GridItem() {
BookShelfGridAddCell()
}
}
GridItem() {
BookShelfFooterView({ viewModel: this.viewModel })
}
.columnStart(0)
.columnEnd(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 4 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 3 : 2)
}
.backgroundColor($r('app.color.bg1'))
.borderRadius({ topLeft: $r('app.float.view_border_radius'), topRight: $r('app.float.view_border_radius') })
.cachedCount(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 5 :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? 4 : 3)
.columnsTemplate(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? '1fr 1fr 1fr 1fr 1fr' :
this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? '1fr 1fr 1fr 1fr' : '1fr 1fr 1fr')
.edgeEffect(EdgeEffect.None)
.layoutDirection(GridDirection.Row)
.rowsGap(24)
.columnsGap(24)
.width('100%')
.height('100%')
.layoutWeight(1)
.padding({ left: 20, right: 20, top: 16 })
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
应用性能问题优化方式有哪些?
84浏览 • 1回复 待解决
ArkTS生成密钥问题有哪些?
60浏览 • 1回复 待解决
启动页面配置问题有哪些?
119浏览 • 1回复 待解决
bindPopup样式问题有哪些啊?
127浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
1639浏览 • 1回复 待解决
组件复用生效的条件有哪些?
93浏览 • 1回复 待解决
Flutter刷新率问题有哪些?
93浏览 • 1回复 待解决
HarmonyOS Grid组件使用ForEach网格布局,Ui数据更新问题
149浏览 • 1回复 待解决
grid组件及数据懒加载
572浏览 • 1回复 待解决
HML独有的组件到底有哪些呢?
9034浏览 • 1回复 待解决
通过PolarDB的性能洞察功能可以实现哪些效果?
2608浏览 • 1回复 待解决
HarmonyOS Grid容器视图更新问题
122浏览 • 1回复 待解决
是否有衡量页面性能的 API?
373浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2602浏览 • 1回复 待解决
使用Grid 组件实现选座场景
537浏览 • 1回复 待解决
动态创建web组件是否有性能问题,具体适用场景是什么
1586浏览 • 0回复 待解决
有哪些办法可以控制组件的显示隐藏?
144浏览 • 1回复 待解决
HarmonyOS Grid绘制多个组件,点击状态处理
69浏览 • 0回复 待解决
HarmonyOS grid组件的auto-fit没效果
95浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
1869浏览 • 1回复 待解决
关于Grid容器和WaterFlow使用上的问题
573浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
2242浏览 • 1回复 待解决
组件需要多次更新时如何优化性能
1656浏览 • 1回复 待解决
性能优化中的组件复用原理是什么
1645浏览 • 1回复 待解决
HarmonyOS List嵌套Grid,Grid怎么自适应高度
213浏览 • 1回复 待解决
性能方案:
推荐的修改方案是使用GridLayoutOptions,参考:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md#%E7%A4%BA%E4%BE%8B3
定位:当从其他页面返回到书架宫格模式页面后,是否调用了 scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign): void 并且smooth 设置为true。 如果是这样的话,建议先设置为false. 开启smooth动效时,会对经过的所有item进行加载和布局计算,当大量加载item时会导致性能问题。 通过trace发现应用一次创建很多组件的超长帧