在实现如下图所示可滚动布局效果时,可能会通过columnStart/columnEnd对GridItem设置其占有行列数,实现不规则的布局效果。
图1 columnStart/columnEnd实现不规则网格布局
如果遇到如下的使用场景,使用columnStart/columnEnd可能会造成性能问题:
- 删除或拖拽等改变GridItem位置:Grid中存在大量GridItem,当使用columnStart/columnEnd、rowStart/rowEnd设置GridItem大小,会导致该场景下Grid渲染耗时过长时,应该考虑使用GridLayoutOptions提升性能。使用columnStart/columnEnd、rowStart/rowEnd在重新渲染时会重建所有GridItem节点。而使用GridLayoutOptions则不需要重建,渲染和加载时间更短。
- 使用scrollToIndex滑动到指定GridItem:当Grid组件中存在大量GridItem,使用columnStart/columnEnd、rowStart/rowEnd布局,在scrollToIndex滑动指定Index时,Grid会遍历GridItem去查找位置。而使用GridLayoutOptions布局,在scrollToIndex滑动指定Index时,则是通过计算方式去查找位置,查找GridItem位置效率更高。
对此,可以通过GridLayoutOptions布局选项,配合rowsTemplate、columnsTemplate仅设置其中一个的Grid使用,替代通过columnStart/columnEnd控制GridItem占用多列的情况。