0
0

【最新鸿蒙开发api12】——学会瀑布流的实现和应用，这一篇就够了

各位码农朋友们,大家好!今天我们要聊一个既有趣又实用的话题 - 如何实现一个赏心悦目的瀑布流布局。不过,我们不是去欣赏大自然的瀑布,而是要用代码创造一个漂亮小姐姐图片的数字瀑布。准备好你的键盘,让我们开始这段美妙的编码之旅吧!

二话不说，先上图

1. LazyForEach的魔力

首先,让我们来认识一下我们的主角 - LazyForEach。它就像是一个勤劳的搬运工,只在需要的时候才去搬运数据,这样可以大大提高我们应用的性能。在我们的瀑布流中,LazyForEach负责懒洋洋地加载那些漂亮的小姐姐图片。

1.1简单介绍

  • LazyForEach是一种用于数据迭代的组件，它能够根据需要按需创建组件，从而优化性能，特别适用于滚动容器中的数据展示场景。为了为LazyForEach提供数据源，您需要实现IDataSource接口，并将其实例作为LazyForEach的数据源参数。
  • 允许开发者从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当这些组件位于滚动容器中时，LazyForEach会根据可视区域动态加载和卸载组件，以此来优化内存使用和提高应用性能。
  • IDataSource接口包含以下几个方法：- totalCount()：返回数据总数。- getData(index)：根据给定的索引返回数据项。- registerDataChangeListener(listener)：注册数据变化监听器。- unregisterDataChangeListener(listener)：注销数据变化监听器。
  • 使用限制- LazyForEach必须在支持数据懒加载的容器组件内使用，如List、Grid、Swiper和WaterFlow组件。- 在每次迭代中，LazyForEach必须创建且只允许创建一个子组件。- 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。- 允许LazyForEach包含在if/else条件渲染语句中，也允许LazyForEach中出现if/else条件渲染语句。- 键值生成器必须针对每个数据生成唯一的值，以确保UI组件的正确渲染和更新。- LazyForEach必须使用DataChangeListener对象来进行更新，以触发UI的刷新

1.2接口

  1. LazyForEach(
  2.   dataSource: IDataSource,             // 需要进行数据迭代的数据源
  3.   itemGenerator: (item: any, index: number) => void,  // 子组件生成函数
  4.   keyGenerator?: (item: any, index: number) => string // 键值生成函数
  5. ): void

1.3案例代码

  1. LazyForEach( this.dataSource, (item: Item, index) => {
  2.   FlowItem(){
  3.       Column(){
  4.         Text('第' + `${this.item.index.toString()}` + '个')
  5.         Image(this.item.image)
  6.           .objectFit(ImageFit.Fill)
  7.           .sharedTransition(`sharedImage${this.item.index}`, {duration: 300, curve:                             
  8.          Curve.Linear,delay:50})
  9.   
  10.         }
  11.         .backgroundColor('#ffa4eaac')
  12.         .borderRadius(8)
  14.   }
  15.   // ... 更多代码
  16. })

这段代码就像是在说:"嘿,LazyForEach,帮我从dataSource中拿些数据来,但别太勤快,用到哪个拿哪个就行!"

2. 瀑布流的使用(案例)

2.1 WaterFlow组件

WaterFlow组件是我们瀑布流的核心。它就像是一个调度员,负责安排每张图片的位置,确保它们像瀑布一样流畅地排列。

  1. build() {
  2.     Column(){
  3.       WaterFlow({footer: ()=> this.itemFoot() ,scroller: this.scroller}){
  4.         LazyForEach( this.dataSource, (item: Item, index) => {
  5.             FlowItem(){
  6.               //...
  7.             } 
  8.             .onClick(() => {
  9.               router.pushUrl(
  10.                 {
  11.                   url: 'pages/waterflow/Preview',
  12.                   params: { item: item, index: index }
  13.                 })
  14.             })
  15.         })
  16.       }
  17.       
  18.       .columnsTemplate('1fr 1fr 1fr')
  19.       .columnsGap(10)
  20.       .rowsGap(8)
  21.       .margin({left: 15, right:15})
  22.     }
  23.     .margin({top:20})
  24.   }

这里我们设置了三列布局,列间距为10,行间距为8,左右各留15的边距。这样,我们的小姐姐们就能整整齐齐地站好啦!

2.2 IDataSource接口的实现

接下来,我们来看看WaterFlowDataSource类。它就像是一个图片管理员,负责存储和管理我们的小姐姐图片。由于代码过长，我将完整代码放到最后，这里只展示核心部分。

主要讲解实现思路

  1. 类的基本结构export class WaterFlowDataSource implements IDataSource { private dataArray: Item[] = [] private listeners: DataChangeListener[] = [] // ...}这里定义了两个私有属性:dataArray用于存储Item对象,listeners用于存储数据变化的监听器。
  2. 构造函数constructor() { for( let i = 1; i <= 40; i++){ let r = getRandomInt(1,6) this.dataArray.push(new Item($r(`app.media.img_gril_${r}`),i)) }}构造函数初始化了40个Item对象,每个对象包含一个随机选择的图片资源和一个索引。
  3. 基本方法实现public getData(index: number): Item { return this.dataArray[index]}​totalCount(): number { return this.dataArray.length}这两个方法分别用于获取特定索引的Item和获取总数据量。
  4. 监听器管理registerDataChangeListener(listener: DataChangeListener): void { // ...}​unregisterDataChangeListener(listener: DataChangeListener): void { // ...}这两个方法用于添加和移除数据变化的监听器。
  5. 数据操作方法public addLastItem(): void { let newItem = this.AddNewItem(this.dataArray.length) this.dataArray.splice(this.dataArray.length, 0, newItem) this.notifyDataAdd(this.dataArray.length - 1)}​AddNewItem(index: number): Item { let randomNumber = getRandomInt(1,6) return new Item($r(`app.media.img_gril_${randomNumber}`), index+1)}addLastItem方法用于在数组末尾添加新元素,AddNewItem方法用于创建新的Item对象。
  6. 通知方法 // 通知控制器数据增加 notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index) }) } // ... 其他通知方法``````这些方法用于在数据发生变化时通知所有注册的监听器。
  7. 辅助函数function getRandomInt(min:number, max:number) { min = Math.ceil(min); // 向上取整 max = Math.floor(max); // 向下取整 return Math.floor(Math.random() * (max - min + 1)) + min; // 包含最大值}这个函数用于生成指定范围内的随机整数,用于选择随机图片。
实现思路
  1. 数据管理: 使用数组存储Item对象,每个对象代表一张图片。
  2. 懒加载: 通过getData方法按需获取数据,而不是一次性加载所有数据。
  3. 动态更新: 提供添加新项目的方法(addLastItem),以实现无限滚动效果。
  4. 事件通知: 使用观察者模式(listeners数组),在数据变化时通知UI更新。
  5. 随机性: 使用随机数生成器来选择图片,增加界面的多样性。

这个类实现了IDataSource接口,提供了获取数据、计算总数等基本功能。它就像是一个图片仓库的管理员,随时准备为我们提供所需的图片。

2.3 无限流

谁不想拥有无限的美女图片呢?我们来实现一个无限流的功能吧!

  1. WaterFlow({footer: ()=> this.itemFoot() ,scroller: this.scroller}){
  2.     //...
  3. }
  4. .onReachEnd(() => {
  5.         console.info('onReached')
  6.         setTimeout( () => {
  7.           for( let i = 0; i < 40; i++){
  8.             this.dataSource.addLastItem()
  9.           }
  10.         }, 1000)
  11.       })

这段代码的意思是:"嘿,当你滑到底的时候,我悄悄地再给你加40张图片,这样你就可以一直欣赏下去啦!"

在WaterFlowDataSource中,我们使用随机数来生成新的图片对象:

  1. AddNewItem(index: number): Item {
  2.   let randomNumber = getRandomInt(1,6)
  3.   return new Item($r(`app.media.img_gril_${randomNumber}`), index+1)
  4. }

这就像是从帽子里变魔术一样,随机抽出一张新的小姐姐图片!

2.4 解决触底加载卡顿的问题

但不知道你有没有发现，每次滑动到底部都会卡顿一下，该如何解决呢？

为了避免滑动到底部时出现卡顿,我们采用了提前加载的策略:

  1. WaterFlow({footer: ()=> this.itemFoot() ,scroller: this.scroller}){
  2.         LazyForEach( this.dataSource, (item: Item, index) => {
  3.             FlowItem(){
  4.               //...
  5.             }
  6.             // 用来避免有加载效果造成的卡顿
  7.             .onAppear(() => {
  8.               // 即将触底时提前增加数据
  9.               if (index + 20 == this.dataSource.totalCount()) {
  10.                 for (let i = 0; i < 40; i++) {
  11.                   this.dataSource.addLastItem()
  12.                 }
  13.                 console.log('waterFlow ' + '即将触底了')
  14.               }
  15.             })
  16.             .onClick(() => {
  17.               router.pushUrl(
  18.                 {
  19.                   url: 'pages/waterflow/Preview',
  20.                   params: { item: item, index: index }
  21.                 })
  22.             })
  23.         })
  24.       }

这就像是在你快吃完盘子里的食物时,服务员已经准备好了下一盘。这样,你就不会感到任何等待的不适啦!

2.5 优化性能,使用复用组件

最后,为了进一步提升性能,我们使用了@Reusable装饰器来复用MyItem组件:

  1. @Reusable
  2. @Component
  3. struct MyItem{
  4.   @State item:Item | null = null
  6.   aboutToReuse(params: Record<string, Item>) {
  7.     this.item = params.item;
  8.     console.info('Reuse item:' + this.item)
  9.   }
  11.   aboutToAppear() {
  12.     console.info('item:' + this.item)
  13.   }
  15.   build(){
  16.     Column(){
  17.       if(this.item)
  18.       {
  19.         Text('第' + `${this.item.index.toString()}` + '个')
  20.         Image(this.item.image)
  21.           .objectFit(ImageFit.Fill)
  22.           .sharedTransition(`sharedImage${this.item.index}`, {duration: 300, curve: Curve.Linear,delay:50})
  23.       }
  24.     }
  25.     .backgroundColor('#ffa4eaac')
  26.     .borderRadius(8)
  27.   }
  28. }

这就像是循环使用餐具,既环保又高效!

3.完整代码

3.1Item

  1. export default class Item{
  2.   image: Resource
  3.   index: number
  5.   constructor(image: Resource,index: number) {
  6.     this.image = image
  7.     this.index = index
  8.   }
  10. }

3.2接口实现

  1. import Item  from './Item'
  3. export class WaterFlowDataSource implements IDataSource{
  4.   private dataArray: Item[] = []
  5.   private listeners: DataChangeListener[] = []
  7.   constructor() {
  8.     for( let i = 1; i <= 40; i++){
  9.         let r = getRandomInt(1,6)
  10.         this.dataArray.push(new Item($r(`app.media.img_gril_${r}`),i))
  11.     }
  12.   }
  14.   public getData(index: number): Item{
  15.     return this.dataArray[index]
  16.   }
  18.   totalCount(): number {
  19.     return this.dataArray.length
  20.   }
  22.   registerDataChangeListener(listener: DataChangeListener): void {
  23.     if( this.listeners.indexOf( listener) < 0){
  24.       this.listeners.push(listener)
  25.     }
  26.   }
  28.   unregisterDataChangeListener(listener: DataChangeListener): void {
  29.     const pos = this.listeners.indexOf(listener)
  30.     if( pos >= 0){
  31.       this.listeners.splice(pos, 1)
  32.     }
  33.   }
  35.   // 在数据尾部增加一个元素
  36.   public addLastItem(): void {
  37.     let newItem = this.AddNewItem(this.dataArray.length)
  38.     this.dataArray.splice(this.dataArray.length, 0, newItem)
  39.     this.notifyDataAdd(this.dataArray.length - 1)
  40.   }
  42.   AddNewItem(index: number): Item {
  43.     let randomNumber = getRandomInt(1,6)
  44.     return new Item($r(`app.media.img_gril_${randomNumber}`), index+1)
  45.   }
  47.   // 通知控制器数据重新加载
  48.   notifyDataReload(): void {
  49.     this.listeners.forEach(listener => {
  50.       listener.onDataReloaded()
  51.     })
  52.   }
  54.   // 通知控制器数据增加
  55.   notifyDataAdd(index: number): void {
  56.     this.listeners.forEach(listener => {
  57.       listener.onDataAdd(index)
  58.     })
  59.   }
  61.   // 通知控制器数据变化
  62.   notifyDataChange(index: number): void {
  63.     this.listeners.forEach(listener => {
  64.       listener.onDataChange(index)
  65.     })
  66.   }
  68.   // 通知控制器数据删除
  69.   notifyDataDelete(index: number): void {
  70.     this.listeners.forEach(listener => {
  71.       listener.onDataDelete(index)
  72.     })
  73.   }
  75.   // 通知控制器数据位置变化
  76.   notifyDataMove(from: number, to: number): void {
  77.     this.listeners.forEach(listener => {
  78.       listener.onDataMove(from, to)
  79.     })
  80.   }
  82.   //通知控制器数据批量修改
  83.   notifyDatasetChange(operations: DataOperation[]): void {
  84.     this.listeners.forEach(listener => {
  85.       listener.onDatasetChange(operations);
  86.     })
  87.   }
  89.   /*// 增加数据
  90.   public add1stItem(): void {
  91.     this.dataArray.splice(0, 0, this.dataArray.length)
  92.     this.notifyDataAdd(0)
  93.   }
  95.   // 在指定索引位置增加一个元素
  96.   public addItem(index: number): void {
  97.     this.dataArray.splice(index, 0, this.dataArray.length)
  98.     this.notifyDataAdd(index)
  99.   }
  101.   // 删除第一个元素
  102.   public delete1stItem(): void {
  103.     this.dataArray.splice(0, 1)
  104.     this.notifyDataDelete(0)
  105.   }
  107.   // 删除第二个元素
  108.   public delete2ndItem(): void {
  109.     this.dataArray.splice(1, 1)
  110.     this.notifyDataDelete(1)
  111.   }
  113.   // 删除最后一个元素
  114.   public deleteLastItem(): void {
  115.     this.dataArray.splice(-1, 1)
  116.     this.notifyDataDelete(this.dataArray.length)
  117.   }
  119.   // 在指定索引位置删除一个元素
  120.   public deleteItem(index: number): void {
  121.     this.dataArray.splice(index, 1)
  122.     this.notifyDataDelete(index)
  123.   }
  125.   // 重新加载数据
  126.   public reload(): void {
  127.     this.dataArray.splice(1, 1)
  128.     this.dataArray.splice(3, 2)
  129.     this.notifyDataReload()
  130.   }*/
  131. }
  133. function getRandomInt(min:number, max:number) {
  134.   min = Math.ceil(min); // 向上取整
  135.   max = Math.floor(max); // 向下取整
  136.   return Math.floor(Math.random() * (max - min + 1)) + min; // 包含最大值
  137. }

3.3主页

  1. import router from '@ohos.router'
  2. import {  WaterFlowDataSource } from './WaterFlowDataSource'
  3. import Item from './Item'
  4. @Entry
  5. @Component
  6. struct WaterFlowPage {
  7.   scroller: Scroller = new Scroller()
  8.   dataSource:WaterFlowDataSource = new WaterFlowDataSource()
  10.   @Builder itemFoot(){
  11.     Column(){
  12.       Text('-------到底了--------')
  13.         .fontSize(10)
  14.         .backgroundColor(Color.White)
  15.         .width('100%')
  16.         .textAlign(TextAlign.Center)
  17.         .height(30)
  18.         .margin({top:5})
  19.     }
  20.   }
  22.   build() {
  23.     Column(){
  24.       WaterFlow({footer: ()=> this.itemFoot() ,scroller: this.scroller}){
  25.         LazyForEach( this.dataSource, (item: Item, index) => {
  26.             FlowItem(){
  27.               MyItem({item:item})
  28.             }
  29.             // 用来避免有加载效果造成的卡顿
  30.             .onAppear(() => {
  31.               // 即将触底时提前增加数据
  32.               if (index + 20 == this.dataSource.totalCount()) {
  33.                 for (let i = 0; i < 40; i++) {
  34.                   this.dataSource.addLastItem()
  35.                 }
  36.                 console.log('waterFlow ' + '即将触底了')
  37.               }
  38.             })
  39.             .onClick(() => {
  40.               router.pushUrl(
  41.                 {
  42.                   url: 'pages/waterflow/Preview',
  43.                   params: { item: item, index: index }
  44.                 })
  45.             })
  46.         })
  47.       }
  48.       /*.onReachEnd(() => {
  49.         console.info('onReached')
  50.         setTimeout( () => {
  51.           for( let i = 0; i < 40; i++){
  52.             this.dataSource.addLastItem()
  53.           }
  54.         }, 1000)
  55.       })*/
  57.       .columnsTemplate('1fr 1fr 1fr')
  58.       .columnsGap(10)
  59.       .rowsGap(8)
  60.       .margin({left: 15, right:15})
  61.     }
  62.     .margin({top:20})
  63.   }
  65. }
  67. @Reusable
  68. @Component
  69. struct MyItem{
  70.   @State item:Item | null = null
  72.   aboutToReuse(params: Record<string, Item>) {
  73.     this.item = params.item;
  74.     console.info('Reuse item:' + this.item)
  75.   }
  77.   aboutToAppear() {
  78.     console.info('item:' + this.item)
  79.   }
  81.   build(){
  82.     Column(){
  83.       if(this.item)
  84.       {
  85.         Text('第' + `${this.item.index.toString()}` + '个')
  86.         Image(this.item.image)
  87.           .objectFit(ImageFit.Fill)
  88.           .sharedTransition(`sharedImage${this.item.index}`, {duration: 300, curve: Curve.Linear,delay:50})
  89.       }
  90.     }
  91.     .backgroundColor('#ffa4eaac')
  92.     .borderRadius(8)
  93.   }
  94. }

3.4点击进入的详情页

  1. import router from '@ohos.router'
  2. import Item  from './Item'
  4. @Entry
  5. @Component
  6. struct Preview {
  7.   @State item: Item | null = null
  8.   @State index: number = 0
  10.   aboutToAppear(): void {
  11.     const params:object = router.getParams()
  12.     this.item = params['item']
  13.     this.index = params['index']
  14.   }
  16.   build() {
  17.     Row(){
  18.       Image(this.item?.image).width('100%')
  19.         .sharedTransition(`sharedItem${this.index}`, {duration: 300, curve: Curve.Linear, delay: 50})
  20.         .align(Alignment.Center)
  21.         .onClick( () => {
  22.           router.back()
  23.         })
  24.     }.width('100%')
  25.     .height('100%')
  26.     .backgroundColor(Color.Black)
  27.     .alignSelf(ItemAlign.Center)
  28.   }
  29. }

结语

好啦,我们的瀑布流小姐姐相册就这样完成啦!通过LazyForEach的懒加载、WaterFlow的灵活布局、无限流的持续加载,以及性能优化,我们创造了一个流畅美观的图片浏览体验。

记住,编程就像是魔法,而你就是那个魔法师。现在,你已经掌握了创建美丽瀑布流的魔法,去创造你自己的数字世界吧!

最后,请记住:欣赏美女图片虽然愉快,但要适度哦。毕竟,我们的目标是成为优秀的程序员,而不是走火入魔的LSP(老色批)!

祝你编码愉快,瀑布流畅!

标签： 鸿蒙 前端 harmonyos
本文转载自: https://blog.csdn.net/m0_66825548/article/details/140775551
版权归原作者 拥有一个学徒的心 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【最新鸿蒙开发api12】——学会瀑布流的实现和应用，这一篇就够了”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。