HarmonyOS 鸿蒙Next瀑布流式图片浏览

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next瀑布流式图片浏览
<markdown _ngcontent-kwh-c237="" class="markdownPreContainer">

介绍

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

准备

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

效果

竖屏

横屏

数据源

使用“好看”公开API，仅供实验
https://api.apiopen.top/api/getHaoKanVideo?page=页码&size=每页数量

功能介绍

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

核心代码

布局

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

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

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")

</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (!</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running) {
  </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> ((</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.pageNo + </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">1</span></span></span></span><span class="hljs-function"><span class="hljs-params">) * </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">15</span></span></span></span><span class="hljs-function"><span class="hljs-params"> &lt; </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.total) {
    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.pageNo++
    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running = </span></span><span class="hljs-literal"><span class="hljs-function"><span class="hljs-params"><span class="hljs-literal">true</span></span></span></span><span class="hljs-function"><span class="hljs-params">

    setTimeout(() =&gt; {
      </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.requestData()
    }, </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">2000</span></span></span></span><span class="hljs-function"><span class="hljs-params">)
  }
}

})
.width(‘100%’)
.height(‘100%’)
.layoutDirection(FlexDirection.Column)


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


}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

横竖屏感知

横竖屏感知整体有两个场景：1. 当前页面发生变化 2.初次进入页面
这里介绍几种监听方式：

当前页面监听

import mediaquery from '@ohos.mediaquery';

//这里你也可以使用"orientation: portrait" 参数
listener = mediaquery.matchMediaSync(’(orientation: landscape)’);
this.listener.on(‘change’, 回调方法)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

外部传参

通过UIAbility, 一直传到Page文件

事件传递

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

this.context.eventHub.on('onConfigurationUpdate', (data) => {
  console.log(JSON.stringify(data))
  let config = data as Configuration
  this.screenDirection = config.direction
  this.configureParamsByScreenDirection()
});
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

API数据请求

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

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) => {

</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (value.responseCode == </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">200</span></span></span></span><span class="hljs-function"><span class="hljs-params">) {

  </span></span><span class="hljs-reserved"><span class="hljs-function"><span class="hljs-params"><span class="hljs-reserved">let</span></span></span></span><span class="hljs-function"><span class="hljs-params"> searchResult: SearchResult = JSON.parse(value.result as string)

  </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (searchResult) {
    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.total = searchResult.result.total

    searchResult.result.list.forEach(ItemModel =&gt; {
      dataSource.addData(ItemModel)
    })
  }
} </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">else</span></span></span></span><span class="hljs-function"><span class="hljs-params"> {
  </span></span><span class="hljs-built_in"><span class="hljs-function"><span class="hljs-params"><span class="hljs-built_in">console</span></span></span></span><span class="hljs-function"><span class="hljs-params">.error(JSON.stringify(value))
}

}).catch(e => {


Logger.d(JSON.stringify(e))

promptAction.showToast({
  message: </span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'网络异常: '</span></span></span></span><span class="hljs-function"><span class="hljs-params"> + JSON.stringify(e),
  duration: </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">2000</span></span></span></span><span class="hljs-function"><span class="hljs-params">
})

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


}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

横竖屏布局调整

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

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)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

瀑布流完整代码

API返回的数据结构

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[]
};
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

Item Model

export class ItemModel{
  public id: number
  public tilte: string
  public userName: string
  public userPic: string
  public coverUrl: string
  public playUrl: string
  public duration: string
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

WaterFlow数据源接口

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
}


}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

布局

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<span class="hljs-function"><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(()=&gt;{
  </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.configureParamsByScreenDirection()
}, </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">300</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">

}


onBackPress(){
this.context.eventHub.off(‘onConfigurationUpdate’)
}


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


</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">console</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">log</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'当前屏幕方向：'</span></span></span></span><span class="hljs-function"><span class="hljs-params"> + </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.context.config.direction)</span></span></span><span class="hljs-function">

</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">if</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(AppStorage.Get(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'screenDirection'</span></span></span></span><span class="hljs-function"><span class="hljs-params">) != </span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'undefined'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function"> {
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">screenDirection</span></span></span><span class="hljs-function"> = </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">AppStorage</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Get</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(CommonConstants.ScreenDirection)</span></span></span><span class="hljs-function">
}

</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">configureParamsByScreenDirection</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function">

</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">eventHubFunc</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function">

</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">let</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">portraitFunc</span></span></span><span class="hljs-function"> = </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onPortrait</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">bind</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">listener</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">on</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'change'</span></span></span></span><span class="hljs-function"><span class="hljs-params">, portraitFunc)</span></span></span><span class="hljs-function">

</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">requestData</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function">

}


@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”)


    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (!</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running) {
      </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> ((</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.pageNo + </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">1</span></span></span></span><span class="hljs-function"><span class="hljs-params">) * </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">15</span></span></span></span><span class="hljs-function"><span class="hljs-params"> &lt; </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.total) {
        </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.pageNo++
        </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running = </span></span><span class="hljs-literal"><span class="hljs-function"><span class="hljs-params"><span class="hljs-literal">true</span></span></span></span><span class="hljs-function"><span class="hljs-params">

        setTimeout(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.requestData()
        }, </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">2000</span></span></span></span><span class="hljs-function"><span class="hljs-params">)
      }
    }

  })</span></span></span><span class="hljs-function">
  .</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">width</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
  .</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">height</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
  .</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">layoutDirection</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(FlexDirection.Column)</span></span></span><span class="hljs-function">

  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">if</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running)</span></span></span><span class="hljs-function"> {
     </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">loadDataFooter</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function">
  }

}

}


requestData() {
let url = </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">https</span></span></span><span class="hljs-function">://</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">api</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">apiopen</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">top</span></span></span><span class="hljs-function">/</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">api</span></span></span><span class="hljs-function">/</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">getHaoKanVideo</span></span></span><span class="hljs-function">?</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">page</span></span></span><span class="hljs-function">=</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">$</span></span></span><span class="hljs-function">{</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">pageNo</span></span></span><span class="hljs-function">}&amp;</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">size</span></span></span><span class="hljs-function">=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) => {


  </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (value.responseCode == </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">200</span></span></span></span><span class="hljs-function"><span class="hljs-params">) {

    </span></span><span class="hljs-reserved"><span class="hljs-function"><span class="hljs-params"><span class="hljs-reserved">let</span></span></span></span><span class="hljs-function"><span class="hljs-params"> searchResult: SearchResult = JSON.parse(value.result as string)

    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">if</span></span></span></span><span class="hljs-function"><span class="hljs-params"> (searchResult) {
      </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.total = searchResult.result.total

      searchResult.result.list.forEach(ItemModel =&gt; {
        dataSource.addData(ItemModel)
      })
    }
  } </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">else</span></span></span></span><span class="hljs-function"><span class="hljs-params"> {
    </span></span><span class="hljs-built_in"><span class="hljs-function"><span class="hljs-params"><span class="hljs-built_in">console</span></span></span></span><span class="hljs-function"><span class="hljs-params">.error(JSON.stringify(value))
  }

})</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">catch</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(e =&gt; {

  Logger.d(JSON.stringify(e))

  promptAction.showToast({
    message: </span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'网络异常: '</span></span></span></span><span class="hljs-function"><span class="hljs-params"> + JSON.stringify(e),
    duration: </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">2000</span></span></span></span><span class="hljs-function"><span class="hljs-params">
  })

})</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">finally</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
  </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.running = </span></span><span class="hljs-literal"><span class="hljs-function"><span class="hljs-params"><span class="hljs-literal">false</span></span></span></span><span class="hljs-function"><span class="hljs-params">
})</span></span></span><span class="hljs-function">

}


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%’
}
}


}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

图片详情页

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)
}


<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.configureParamsByScreenDirection()

<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.extParams = router.getParams() as ItemModel
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.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)
})


    </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Flex</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">({direction: </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.tipDirection, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, alignContent: FlexAlign.Center})</span></span></span><span class="hljs-function">{
      </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Row</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> {
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'src'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.videoSrc = $rawfile(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'video2.mp4'</span></span></span></span><span class="hljs-function"><span class="hljs-params">) </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 切换视频源
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'previewUri'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.previewUri = $r(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'app.media.poster2'</span></span></span></span><span class="hljs-function"><span class="hljs-params">) </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 切换视频预览海报
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'controls'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.showControls = !</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.showControls </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 切换是否显示视频控制栏
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
      }

      </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Row</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> {
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'start'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.controller.start() </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 开始播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'pause'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.controller.pause() </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 暂停播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'stop'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.controller.stop() </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 结束播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'setTime'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.controller.setCurrentTime(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">10</span></span></span></span><span class="hljs-function"><span class="hljs-params">, SeekMode.Accurate) </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 精准跳转到视频的</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">10</span></span></span></span><span class="hljs-function"><span class="hljs-params">s位置
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
      }
      </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Row</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> {
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'rate 0.75'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.curRate = PlaybackSpeed.Speed_Forward_0_75_X </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">0.75</span></span></span></span><span class="hljs-function"><span class="hljs-params">倍速播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'rate 1'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.curRate = PlaybackSpeed.Speed_Forward_1_00_X </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> 原倍速播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
        </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'rate 2'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(() =&gt; {
          </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.curRate = PlaybackSpeed.Speed_Forward_2_00_X </span></span><span class="hljs-regexp"><span class="hljs-function"><span class="hljs-params"><span class="hljs-regexp">//</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">2</span></span></span></span><span class="hljs-function"><span class="hljs-params">倍速播放
        })</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">margin</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-number"><span class="hljs-function"><span class="hljs-params"><span class="hljs-number">5</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
      }
    }
    .</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">width</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.tipWidth)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">height</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.tipHeight)</span></span></span><span class="hljs-function">
  }

}


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


   </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.configureParamsByScreenDirection()

})</span></span></span><span class="hljs-function">;

}


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


} </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">else</span></span></span><span class="hljs-function"> {
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">videoWidth</span></span></span><span class="hljs-function"> = '60%'
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">videoHeight</span></span></span><span class="hljs-function"> = '100%'
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">tipWidth</span></span></span><span class="hljs-function"> = '40%'
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">tipHeight</span></span></span><span class="hljs-function"> = '100%'
  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">this</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">componentDirection</span></span></span><span class="hljs-function"> = </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">FlexDirection</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Row</span></span></span><span class="hljs-function">

}

}


}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>
</markdown>

Harmonyos Next教程
8 回复
实际场景很少单独有瀑布流，基本都是scroll嵌套瀑布流的场景

是的，在scroll, list, waterflow复杂场景下联动，当前还没有看到技术层面的解决方案

我也是卡在这了……

不过有一个API你可以尝试一下，只能解决部分联动问题，大概是hitTest开头的，用于拦截触摸事件的

请问楼主有没有可以运行的gitee 地址呢，运行demo更直观

请问有找到类似的gitee仓库吗

请问有开源的仓库吗，感谢感谢

针对HarmonyOS 鸿蒙Next的瀑布流式图片浏览功能，可以通过使用WaterFlow组件结合LazyForEach实现懒加载和高效渲染。确保数据结构中包含图片和文字，通过调整columnsTemplate、columnsGap和rowsGap等属性来优化布局效果。同时，处理横竖屏变化时，需通过监听媒体查询或配置响应式布局来适配不同屏幕尺寸。如果问题依旧没法解决，请加我微信，我的微信是itying888。

回到顶部