grid组件及数据懒加载
在常用的手机应用中,经常会见到一些数据列表,如设置页面、通讯录、商品列表等。下图中两个页面都包含列表,“首页”页面中包含两个网格布局,“商城”页面中包含一个商品列表。
透过上面的现象,其实可以把以上抽象为两类列表,一个是网格列表(Grid),一个是线性列表(List),具体抽象出来的图像如下图。
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
Tabs组件懒加载的问题
2096浏览 • 1回复 待解决
HarmonyOS 懒加载的数据删除问题
266浏览 • 1回复 待解决
HarmonyOS 希望 Tabs 组件能提供懒加载功能
125浏览 • 1回复 待解决
Grid和List添加自定义的Header或Footer,LazyForEach的懒加载和回收功能失效
674浏览 • 1回复 待解决
如何实现Fraction懒加载功能?
7241浏览 • 1回复 待解决
使用LazyForEach懒加载列表相关问题
721浏览 • 1回复 待解决
如何让list-item组件里的image图片懒加载?
2299浏览 • 1回复 待解决
HarmonyOS 列表展示list懒加载问题
373浏览 • 1回复 待解决
界面内容瀑布流懒加载实现
887浏览 • 1回复 待解决
LazyForEach懒加载的原理是什么
2005浏览 • 1回复 待解决
数组嵌套数组场景的懒加载实现
533浏览 • 1回复 待解决
HarmonyOS image组件图片加载性能数据
122浏览 • 1回复 待解决
HarmonyOS 关于LazyForEach懒加载实现列表页面后,搜索功能何如做?
113浏览 • 1回复 待解决
请问有什么好的方式实现TabContent页面懒加载?
139浏览 • 1回复 待解决
HarmonyOS Grid组件使用ForEach网格布局,Ui数据更新问题
335浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
147浏览 • 1回复 待解决
Grid组件性能问题有哪些?
300浏览 • 1回复 待解决
List及ListItem组件的使用
1366浏览 • 1回复 待解决
Grid组件显示异常该怎么处理?
212浏览 • 1回复 待解决
HarmonyOS 可移动GridItem的Grid组件
104浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2954浏览 • 1回复 待解决
使用Grid 组件实现选座场景
788浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序的问题
197浏览 • 0回复 待解决
HarmonyOS Grid绘制多个组件,点击状态处理
307浏览 • 0回复 待解决
HarmonyOS grid组件的auto-fit没效果
291浏览 • 1回复 待解决
使用的核心API
Grid-容器组件
LazyForEach:数据懒加载
核心代码解释
和List组件一样,Grid组件也可以使用ForEach来渲染多个列表项GridItem,示例代码中创建了16个GridItem列表项。同时设置columnsTemplate的值为'1fr 1fr 1fr 1fr',表示这个网格为4列,将Grid允许的宽分为4等分,每列占1份;rowsTemplate的值为'1fr 1fr 1fr 1fr',表示这个网格为4行,将Grid允许的高分为4等分,每行占1份。
这样就构成了一个4行4列的网格列表,然后使用columnsGap设置列间距为10vp,使用rowsGap设置行间距也为10vp。
上面构建的网格布局使用了固定的行数和列数,所以构建出的网格是不可滚动的。然而有时候因为内容较多,我们通过滚动的方式来显示更多的内容,就需要一个可以滚动的网格布局。我们只需要设置rowsTemplate和columnsTemplate中的一个即可。
将示例代码中GridItem的高度设置为固定值,例如100;仅设置columnsTemplate属性,不设置rowsTemplate属性,就可以实现Grid列表的滚动。
基于以上示例都是在理想情况下演示,一般list和gird是日常开发中用的最多的容器组件,一般在实际开发中我们数据库的内容成千上万,假如我们要一次性全部在手机上记载出来,那是不可能的,所以为了用户的体验,我们一般会用数据懒加载来实现这种多数据展示,而对用户来说是无感知的,增强用户体验。
LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用。
代码如下:
实现效果