#创作者激励#OpenHarmony仿视频播放器应用-爱电影(二) 原创 精华
【本文正在参加2023年第一期优质创作者激励计划】
作者:徐金生
仿视频播放器应用-爱电影合集
- OpenHarmony仿视频播放器应用-爱电影(一)
- OpenHarmony仿视频播放器应用-爱电影(二)
- OpenHarmony仿视频播放器应用-爱电影(三)
- OpenHarmony仿视频播放器应用-爱电影(四)
效果
接上一篇,闪屏页面跳转到主页,接下来我们详细的说说主页开发涉及的内容,首先我们来看下主页是设计图,如下:
简单来说页面分成上下两部分,上半部分是一个横向滚动的banner,下半部分是电影资源的列表,列表中的一行两列均分,每一个资源信息包括:电影资源的宣传图、电影名称、演员、电影亮点。
项目开发
开发环境
硬件平台:DAYU2000 RK3568
系统版本:OpenHarmony 3.2 beta5
SDK:9(3.2.10.6)
IDE:DevEco Studio 3.1 Beta1 Build Version: 3.1.0.200, built on February 13, 2023
程序代码
Index.ets
开发详解
1、电影数据
界面内容需要通过数据进行加载,目前没有相关的电影云端,我们就先在本地mock出一些电影数据,每个电影数据都应该包含以下属性,我们定义了一个类来表示:VideoData.ets
VideoData.ets
2、构建数据
温馨提示:电影相关的数据是本地模拟,除了电影名称和电影宣传图相关,其他信息纯属虚构,如果你感兴趣也可以自己构建。
这个很简单,就是根据VideoData所定义的数据,构建出首页需要显示的内容,因为mock的数据都是自定义的,所以这里就帖部分代码,如果你有兴趣可以自行构造,如下所示:
MockVideoData.ets
3、banner
在Index.ets的aboutToAppear()函数中初始化数据,通过MockVideoData.getBannerList()获取到banner列表,使用Swiper滑块组件实现自动轮播显示。在Swiper容器中使用了LazyForEach懒加载的方式进行子项的加载。
简单说明下LazyForEach懒加载机制,由于在长列表渲染中会涉及到大量的数据加载,如果处理不当会导致资源占用影响性能,在ArkUI3.0针对这样的情况提供了一种懒加载机制,它会自动根据具体的情况计算出适合渲染的数据,实现数据的按需加载,提升UI刷新效率。
4、电影列表
在Index.ets的aboutToAppear()函数中初始化数据,通过MockVideoData.getVideoList()获取到Video列表,因为电影列表的布局在项目中其他模块也会使用到,所以这里将电影列表抽象出一个子组件VideoListView。
VideoListView.ets
使用Grid实现电影列表,由于电影列表属于长列表数据,所以这里也使用了LazyForEach懒加载机制进行item子项的加载,最终通过import的方式引入到Index.ets页面中,并在布局中添加此组件。
5、滚动页面
首页是电影列表页,需要加载banner和电影列表,所以整体页面都需要可滚动,因此在banner和视频列表容器外添加了Scroll组件。
问题1:Scroll与Grid列表嵌套时,电影列表无法显示完整,或者无法显示banner
如下所示:
为了描述清楚这个问题,我们将界面可以触发滑动的区域分为banner部分和VideoList部分,根据滑动的触发区域不同,进行如下说明:
1、触发滑动区域在VideoList,当滑动到VideoList末尾时会出现最后一列的item只显示了部分,滑动区域在VideoList的时候无论怎么向上滑动都无法显示完整;
2、在1的场景下,触发滑动区域在banner,并向上滑动,此时可以看到,页面整体向上移动,VideoList中缺失的item部分可以正常显示,banner划出界面时,VideoList可以显示完整;
3、在2的场景下,整个界面目前都是VideoList区域,VideoList已滑动到的最后,此时向下滑动,因为触发的区域是VideoList,所以整个VideoList向下滑动显示,直到电影列表首项,由于整个页面的可滑动区域都是VideoLIst,无法在触发Scroll的滑动,所以banner无法显示。
这个问题其实就是界面视图高度计算和触发滑动监听被消费后无法再向上层传递导致,解决这个问题有多种方式,下面我介绍其中一种。
解决方案:Scroll组件中可以添加一个Scroller滑动组件的控制器,控制器可以控制组件的滚动,比如滚动的指定高度,或者指定的index,在Grid中也可以添加一个Scroller控制器进行列表高度控制,在Grid还可以通过onScrollIndex()事件监听网格显示的起始位置item发生变化,返回当前的item坐标。当滑动区域在VideoList时,如果item坐标发生了变化,就更新scrollIndex,在Index.ets中监听scrollIndex的变化,当scrollIndex=0时表示已经滑动到VideoList首项,此时再向下滑动时控制Scroll的控制器,让Scroll滑动到(0,0)位置,也就是页面顶部,这样就可以显示banner;当scrollIndex=2时,表示VideoList向上滑动到第二列,此时设置外层Scroll容器的滑动高度,让banner划出界面,使得VideoList可以完整显示。
实现核心代码
1、Index.ets
2、VideoListView.ets
感谢
如果您能看到最后,还希望您能动动手指点个赞,一个人能走多远关键在于与谁同行,我用跨越山海的一路相伴,希望得到您的点赞。
可以看出功能相当丰富
很喜欢这个UI
很不错啊
设计的不错