当前位置：首页 > article >正文

鸿蒙开发入门教程—瀑布流的实战案例

article 2024/12/27 23:46:18

给大家分享一下瀑布流的实战案例，和官方文档略有不同，本文数据直接从api接口获取，更接近实战。需要注意的是，要实现瀑布流，接口最好将图片尺寸一起返回。

本文效果图：

首先要实现IDataSource接口的对象，用于瀑布流组件加载数据：

export class WaterFlowDataSource implements IDataSource {
  private dataArray: Object[] = []
  private listeners: DataChangeListener[] = []
  constructor() {
    let url = "http://youlanjihua.com/AIImage/wallpaper.php?classId=2"
    HttpManager.getInstance().request({
      method: RequestMethod.GET,
      url: url
    }).then((result:object)=>{
      let str = JSON.stringify(result)
      let strArr:Object[] =  JSON.parse(str)
      for (let i = 0; i < strArr.length; i++) {
        this.dataArray.push(strArr[i])
      }
      this.notifyDataReload()
    })
  }
  // 获取索引对应的数据
  public getData(index: number): Object {
    return this.dataArray[index]
  }
  // 通知控制器数据重新加载
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }
  // 通知控制器数据增加
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdded(index)
    })
  }
  // 通知控制器数据变化
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChanged(index)
    })
  }

  // 通知控制器数据删除
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDeleted(index)
    })
  }
  // 通知控制器数据位置变化
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMoved(from, to)
    })
  }
  // 获取数据总数
  public totalCount(): number {
    return this.dataArray.length
  }
  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }
  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }
  // 增加数据
  public Add1stItem(): void {
    this.dataArray.splice(0, 0, this.dataArray.length)
    this.notifyDataAdd(0)
  }
  // 在数据尾部增加一个元素
  public AddLastItem(): void {
    this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
    this.notifyDataAdd(this.dataArray.length-1)
  }
  // 在指定索引位置增加一个元素
  public AddItem(index: number): void {
    this.dataArray.splice(index, 0, this.dataArray.length)
    this.notifyDataAdd(index)
  }
  // 删除第一个元素
  public Delete1stItem(): void {
    this.dataArray.splice(0, 1)
    this.notifyDataDelete(0)
  }

  // 删除第二个元素
  public Delete2ndItem(): void {
    this.dataArray.splice(1, 1)
    this.notifyDataDelete(1)
  }
  // 删除最后一个元素
  public DeleteLastItem(): void {
    this.dataArray.splice(-1, 1)
    this.notifyDataDelete(this.dataArray.length)
  }
  // 重新加载数据
  public Reload(): void {
    this.dataArray.splice(1, 1)
    this.dataArray.splice(3, 2)
    this.notifyDataReload()
  }
}

然后使用WaterFlow组件展示数据：

import { HttpManager } from '../../library/httpTool/HttpManager';
import { RequestMethod } from '../../library/httpTool/RequestOptions';
import display from '@ohos.display';
@Entry
@Component
export  struct Home {
  @State dataSource: WaterFlowDataSource = new WaterFlowDataSource()
  @State item_width:number = (px2vp(display.getDefaultDisplaySync().width) - 5)/2
  build() {
      Column({ space: 2 }) {
        WaterFlow() {
          LazyForEach(this.dataSource, (item: object,index:number) => {
            FlowItem() {
              Column() {
                Image("http://youlanjihua.com/AIImage/wallpaper/compressSize/l_" + item['cover'])
                  .objectFit(ImageFit.Fill)
                  .width('100%')
                  .layoutWeight(1)
              }
            }
            .width('100%')
            .height(this.item_width * item['height']/item['width'])
            .backgroundColor('#ececec')
          }, (item: string) => item)
        }
        .columnsTemplate("1fr 1fr")
        .columnsGap(5)
        .rowsGap(5)
        .backgroundColor(Color.White)
        .width('100%')
        .height('100%')
      }
  }
}

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→《鸿蒙星河版开发教程指南》