HarmonyOS 瀑布流式图片浏览

harvey_fly2023-12-06 18:57

介绍

瀑布流式展示图片文字，在当前产品设计中已非常常见，本篇将介绍关于WaterFlow的图片浏览场景，顺便集成Video控件，以提高实践的趣味性

准备

  1. 请参照官方指导，创建一个Demo工程，选择Stage模型
  2. 熟读HarmonyOS 官方指导"WaterFlow"

效果

竖屏

横屏

数据源

使用"好看"公开API，仅供实验
api.apiopen.top/api/getHaoK...

功能介绍

  1. 瀑布流式图片展示
  2. 横竖屏图片/视频展示

核心代码

布局

整体结构为：瀑布流 + 加载进度条

每条数据结构： 图片 + 文字 【由于没有设定图片宽高比，因此通过文字长度来自然生成瀑布流效果】

由于有点数据量，按照官方指导，采用LazyForEach懒加载方式

scss 复制代码 
Stack() {
  WaterFlow({ scroller: this.scroller }) {
    LazyForEach(dataSource, item => {
      FlowItem() {
        Column({ space: 10 }) {
          Image(item.coverUrl).objectFit(ImageFit.Cover)
            .width('100%')
            .height(this.imageHeight)
          Text(item.title)
            .fontSize(px2fp(50))
            .fontColor(Color.Black)
            .width('100%')
        }.onClick(() => {
          router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
        })
      }
    }, item => item)
  }
  .columnsTemplate(this.columnsTemplate)
  .columnsGap(5)
  .rowsGap(5)
  .onReachStart(() => {
    console.info("onReachStart")
  })
  .onReachEnd(() => {
    console.info("onReachEnd")

    if (!this.running) {
      if ((this.pageNo + 1) * 15 < this.total) {
        this.pageNo++
        this.running = true

        setTimeout(() => {
          this.requestData()
        }, 2000)
      }
    }

  })
  .width('100%')
  .height('100%')
  .layoutDirection(FlexDirection.Column)

  if (this.running) {
     this.loadDataFooter()
  }

}

横竖屏感知

横竖屏感知整体有两个场景：1. 当前页面发生变化 2.初次进入页面

这里介绍几种监听方式：

当前页面监听

csharp 复制代码 
import mediaquery from '@ohos.mediaquery';

//这里你也可以使用"orientation: portrait" 参数
listener = mediaquery.matchMediaSync('(orientation: landscape)');
this.listener.on('change', 回调方法)

外部传参

通过UIAbility, 一直传到Page文件

事件传递

采用EeventHub机制，在UIAbility把横竖屏切换事件发出来，Page文件注册监听事件

kotlin 复制代码 
this.context.eventHub.on('onConfigurationUpdate', (data) => {
  console.log(JSON.stringify(data))
  let config = data as Configuration
  this.screenDirection = config.direction
  this.configureParamsByScreenDirection()
});

API数据请求

这里需要设置Android 或者 iOS 特征UA

typescript 复制代码 
requestData() {
  let url = `https://api.apiopen.top/api/getHaoKanVideo?page=${this.pageNo}&size=15`
  let httpRequest = http.createHttp()
  httpRequest.request(
    url,
    {
      header: {
        "User-Agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
      }
    }).then((value: http.HttpResponse) => {

    if (value.responseCode == 200) {

      let searchResult: SearchResult = JSON.parse(value.result as string)

      if (searchResult) {
        this.total = searchResult.result.total

        searchResult.result.list.forEach(ItemModel => {
          dataSource.addData(ItemModel)
        })
      }
    } else {
      console.error(JSON.stringify(value))
    }

  }).catch(e => {

    Logger.d(JSON.stringify(e))

    promptAction.showToast({
      message: '网络异常: ' + JSON.stringify(e),
      duration: 2000
    })

  }).finally(() => {
    this.running = false
  })

}

横竖屏布局调整

因为要适应横竖屏，所以需要在原有布局的基础上做一点改造， 让瀑布流的列参数改造为@State 变量 ， 让图片高度的参数改造为@State 变量

scss 复制代码 
WaterFlow({ scroller: this.scroller }) {
  LazyForEach(dataSource, item => {
    FlowItem() {
      Column({ space: 10 }) {
        Image(item.coverUrl).objectFit(ImageFit.Cover)
          .width('100%')
          .height(this.imageHeight)
        Text(item.title)
          .fontSize(px2fp(50))
          .fontColor(Color.Black)
          .width('100%')
      }.onClick(() => {
        router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
      })
    }
  }, item => item)
}
.columnsTemplate(this.columnsTemplate)

瀑布流完整代码

API返回的数据结构

typescript 复制代码 
import { ItemModel } from './ItemModel'

export default class SearchResult{
  public code: number
  public message: string
  public result: childResult
}

class childResult {
  public total: number
  public list: ItemModel[]
};

Item Model

typescript 复制代码 
export class ItemModel{
  public id: number
  public tilte: string
  public userName: string
  public userPic: string
  public coverUrl: string
  public playUrl: string
  public duration: string
}

WaterFlow数据源接口

kotlin 复制代码 
import List from '@ohos.util.List';
import { ItemModel } from './ItemModel';

export class PicData implements IDataSource {

  private data: List<ItemModel> = new List<ItemModel>()

  addData(item: ItemModel){
    this.data.add(item)
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {

  }

  registerDataChangeListener(listener: DataChangeListener): void {

  }

  getData(index: number): ItemModel {
     return this.data.get(index)
  }

  totalCount(): number {
    return this.data.length
  }


}

布局

typescript 复制代码 
import http from '@ohos.net.http';
import { CommonConstants } from '../../common/CommonConstants';
import Logger from '../../common/Logger';
import { PicData } from './PicData';
import SearchResult from './Result';
import promptAction from '@ohos.promptAction'
import router from '@ohos.router';
import common from '@ohos.app.ability.common';
import { Configuration } from '@ohos.app.ability.Configuration';
import mediaquery from '@ohos.mediaquery';

let dataSource = new PicData()

/**
 * 问题： 横竖屏切换，间距会发生偶发性变化
 * 解决方案：延迟300毫秒改变参数
 *
 */
@Entry
@Component
struct GridLayoutIndex {
  private context = getContext(this) as common.UIAbilityContext;
  @State pageNo: number = 0
  total: number = 0
  @State running: boolean = true
  @State screenDirection: number = this.context.config.direction
  @State columnsTemplate: string = '1fr 1fr'
  @State imageHeight: string = '20%'
  scroller: Scroller = new Scroller()

  // 当设备横屏时条件成立
  listener = mediaquery.matchMediaSync('(orientation: landscape)');

  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
      //横屏
      this.screenDirection = 1
    } else {
      //竖屏
      this.screenDirection = 0
    }

    setTimeout(()=>{
      this.configureParamsByScreenDirection()
    }, 300)
  }

  onBackPress(){
    this.context.eventHub.off('onConfigurationUpdate')
  }

  aboutToAppear() {
    console.log('已进入瀑布流页面')

    console.log('当前屏幕方向：' + this.context.config.direction)

    if (AppStorage.Get('screenDirection') != 'undefined') {
      this.screenDirection = AppStorage.Get(CommonConstants.ScreenDirection)
    }

    this.configureParamsByScreenDirection()

    this.eventHubFunc()

    let portraitFunc = this.onPortrait.bind(this)
    this.listener.on('change', portraitFunc)

    this.requestData()
  }

  @Builder loadDataFooter() {
    LoadingProgress()
      .width(px2vp(150))
      .height(px2vp(150))
      .color(Color.Orange)
  }

  build() {
    Stack() {
      WaterFlow({ scroller: this.scroller }) {
        LazyForEach(dataSource, item => {
          FlowItem() {
            Column({ space: 10 }) {
              Image(item.coverUrl).objectFit(ImageFit.Cover)
                .width('100%')
                .height(this.imageHeight)
              Text(item.title)
                .fontSize(px2fp(50))
                .fontColor(Color.Black)
                .width('100%')
            }.onClick(() => {
              router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
            })
          }
        }, item => item)
      }
      .columnsTemplate(this.columnsTemplate)
      .columnsGap(5)
      .rowsGap(5)
      .onReachStart(() => {
        console.info("onReachStart")
      })
      .onReachEnd(() => {
        console.info("onReachEnd")

        if (!this.running) {
          if ((this.pageNo + 1) * 15 < this.total) {
            this.pageNo++
            this.running = true

            setTimeout(() => {
              this.requestData()
            }, 2000)
          }
        }

      })
      .width('100%')
      .height('100%')
      .layoutDirection(FlexDirection.Column)

      if (this.running) {
         this.loadDataFooter()
      }

    }

  }

  requestData() {
    let url = `https://api.apiopen.top/api/getHaoKanVideo?page=${this.pageNo}&size=15`
    let httpRequest = http.createHttp()
    httpRequest.request(
      url,
      {
        header: {
          "User-Agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
        }
      }).then((value: http.HttpResponse) => {

      if (value.responseCode == 200) {

        let searchResult: SearchResult = JSON.parse(value.result as string)

        if (searchResult) {
          this.total = searchResult.result.total

          searchResult.result.list.forEach(ItemModel => {
            dataSource.addData(ItemModel)
          })
        }
      } else {
        console.error(JSON.stringify(value))
      }

    }).catch(e => {

      Logger.d(JSON.stringify(e))

      promptAction.showToast({
        message: '网络异常: ' + JSON.stringify(e),
        duration: 2000
      })

    }).finally(() => {
      this.running = false
    })

  }

  eventHubFunc() {
    this.context.eventHub.on('onConfigurationUpdate', (data) => {
      console.log(JSON.stringify(data))
      // let config = data as Configuration
      // this.screenDirection = config.direction
      // this.configureParamsByScreenDirection()
    });
  }

  configureParamsByScreenDirection(){
    if (this.screenDirection == 0) {
      this.columnsTemplate = '1fr 1fr'
      this.imageHeight = '20%'
    } else {
      this.columnsTemplate = '1fr 1fr 1fr 1fr'
      this.imageHeight = '50%'
    }
  }

}

图片详情页

kotlin 复制代码 
import { CommonConstants } from '../../common/CommonConstants';
import router from '@ohos.router';
import { ItemModel } from './ItemModel';
import common from '@ohos.app.ability.common';
import { Configuration } from '@ohos.app.ability.Configuration';

@Entry
@Component
struct DetailIndex{
  private context = getContext(this) as common.UIAbilityContext;

  extParams: ItemModel
  @State previewUri: Resource = $r('app.media.splash')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  controller: VideoController = new VideoController()

  @State screenDirection: number = 0
  @State videoWidth: string = '100%'
  @State videoHeight: string = '70%'

  @State tipWidth: string = '100%'
  @State tipHeight: string = '30%'

  @State componentDirection: number = FlexDirection.Column
  @State tipDirection: number = FlexDirection.Column

  aboutToAppear() {
    console.log('准备加载数据')
    if(AppStorage.Get('screenDirection') != 'undefined'){
      this.screenDirection = AppStorage.Get(CommonConstants.ScreenDirection)
    }

    this.configureParamsByScreenDirection()

    this.extParams = router.getParams() as ItemModel
    this.eventHubFunc()
  }

  onBackPress(){
    this.context.eventHub.off('onConfigurationUpdate')
  }

  build() {
      Flex({direction: this.componentDirection}){
        Video({
          src: this.extParams.playUrl,
          previewUri: this.extParams.coverUrl,
          currentProgressRate: this.curRate,
          controller: this.controller,
        }).width(this.videoWidth).height(this.videoHeight)
          .autoPlay(this.isAutoPlay)
          .objectFit(ImageFit.Contain)
          .controls(this.showControls)
          .onStart(() => {
            console.info('onStart')
          })
          .onPause(() => {
            console.info('onPause')
          })
          .onFinish(() => {
            console.info('onFinish')
          })
          .onError(() => {
            console.info('onError')
          })
          .onPrepared((e) => {
            console.info('onPrepared is ' + e.duration)
          })
          .onSeeking((e) => {
            console.info('onSeeking is ' + e.time)
          })
          .onSeeked((e) => {
            console.info('onSeeked is ' + e.time)
          })
          .onUpdate((e) => {
            console.info('onUpdate is ' + e.time)
          })

        Flex({direction: this.tipDirection, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, alignContent: FlexAlign.Center}){
          Row() {
            Button('src').onClick(() => {
              // this.videoSrc = $rawfile('video2.mp4') // 切换视频源
            }).margin(5)
            Button('previewUri').onClick(() => {
              // this.previewUri = $r('app.media.poster2') // 切换视频预览海报
            }).margin(5)
            Button('controls').onClick(() => {
              this.showControls = !this.showControls // 切换是否显示视频控制栏
            }).margin(5)
          }

          Row() {
            Button('start').onClick(() => {
              this.controller.start() // 开始播放
            }).margin(5)
            Button('pause').onClick(() => {
              this.controller.pause() // 暂停播放
            }).margin(5)
            Button('stop').onClick(() => {
              this.controller.stop() // 结束播放
            }).margin(5)
            Button('setTime').onClick(() => {
              this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
            }).margin(5)
          }
          Row() {
            Button('rate 0.75').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
            }).margin(5)
            Button('rate 1').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
            }).margin(5)
            Button('rate 2').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
            }).margin(5)
          }
        }
        .width(this.tipWidth).height(this.tipHeight)
      }

  }

  eventHubFunc() {
    this.context.eventHub.on('onConfigurationUpdate', (data) => {
       console.log(JSON.stringify(data))
       let config = data as Configuration
       this.screenDirection = config.direction

       this.configureParamsByScreenDirection()

    });
  }


  configureParamsByScreenDirection(){
    if(this.screenDirection == 0){
      this.videoWidth = '100%'
      this.videoHeight = '70%'
      this.tipWidth = '100%'
      this.tipHeight = '30%'
      this.componentDirection = FlexDirection.Column

    } else {
      this.videoWidth = '60%'
      this.videoHeight = '100%'
      this.tipWidth = '40%'
      this.tipHeight = '100%'
      this.componentDirection = FlexDirection.Row

    }

  }

}
相关推荐
行者961 小时前
Flutter与OpenHarmony深度集成：数据导出组件的实战优化与性能提升
flutter·harmonyos·鸿蒙
小雨下雨的雨1 小时前
Flutter 框架跨平台鸿蒙开发 —— Row & Column 布局之轴线控制艺术
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 小时前
Flutter 框架跨平台鸿蒙开发 —— Center 控件之完美居中之道
flutter·ui·华为·harmonyos·鸿蒙
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Icon 控件之图标交互美学
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Placeholder 控件之布局雏形美学
flutter·ui·华为·harmonyos·鸿蒙系统
行者963 小时前
OpenHarmony Flutter弹出菜单组件深度实践：从基础到高级的完整指南
flutter·harmonyos·鸿蒙
小雨下雨的雨4 小时前
Flutter 框架跨平台鸿蒙开发 —— Padding 控件之空间呼吸艺术
flutter·ui·华为·harmonyos·鸿蒙系统
行者964 小时前
Flutter到OpenHarmony：横竖屏自适应布局深度实践
flutter·harmonyos·鸿蒙
小雨下雨的雨4 小时前
Flutter 框架跨平台鸿蒙开发 —— Align 控件之精准定位美学
flutter·ui·华为·harmonyos·鸿蒙
行者965 小时前
Flutter与OpenHarmony集成：跨平台开关组件的实践与优化
flutter·harmonyos·鸿蒙
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）062025-04-03 Latex学习1——本地配置Latex + VScode环境07Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定08【踩坑笔记】50系显卡适配的 PyTorch 安装09Opencode CLI 安装成功,但是启动失败10UV安装并设置国内源