鸿蒙Next开发实战教程—电影app

最近忙忙活活写了不少教程，但是总感觉千篇一律，没什么意思，大家如果有感兴趣的项目可以私信给幽蓝君写一写。

今天分享一个电影App。

这个项目也比较简单，主要是一些简单页面的开发和本地视频的播放以及横竖屏切换。

页面搭建以首页为例，很明显这是一个List页面，不过每一个部分都可以左右滑动，顶部banner部分是支持翻页的，所以使用Swiper组件实现，其他部分均使用Scroll组件实现。相关代码如下：

build(){List(){ListItem(){Swiper(){Image($r('app.media.headimg')).width('100%').height(380).objectFit(ImageFit.Fill).onClick(()=>{router.pushUrl({url:'pages/Info'})})}}ListItemGroup({header:this.ListHeader('分类',false)}){ListItem(){Scroll(){Row(){ForEach(this.types,(str:string,index)=>{Text(str).fontSize(15).fontColor(Color.White) .padding({top:8,bottom:8,left:22,right:22}).borderRadius(15).backgroundColor(this.currentType == index ? '#6152FF':'rgb(6,4,31)')                .onClick(()=>{                  router.pushUrl({                    url:'pages/MovieList'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})    ListItemGroup({header:this.ListHeader('最受欢迎',true)}){      ListItem(){        Scroll(){          Row({space:10}){            ForEach(this.popularMovies,(img:Resource,index)=>{              Image(img)                .width(124)                .height(180)                .objectFit(ImageFit.Contain)                .borderRadius(10)                .onClick(()=>{                  router.pushUrl({                    url:'pages/Info'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})    ListItemGroup({header:this.ListHeader('最新电影',true)}){      ListItem(){        Scroll(){          Row({space:10}){            ForEach(this.popularMovies,(img:Resource,index)=>{              Image(img)                .width(124)                .height(180)                .objectFit(ImageFit.Contain)                .borderRadius(10)                .onClick(()=>{                  router.pushUrl({                    url:'pages/Info'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})  }  .width('100%')  .height('100%')  .backgroundColor('rgb(6,4,31)')}@Builder ListHeader(title:string,isRight:boolean){  Row(){    Text(title)      .fontColor(Color.White)      .fontSize(15)    if(isRight){      Text('查看全部')        .fontColor(Color.White)        .fontSize(11)    }  }  .alignItems(VerticalAlign.Center)  .width('100%')  .height(40)  .justifyContent(FlexAlign.SpaceBetween)  .onClick(()=>{    router.pushUrl({      url:'pages/MovieList'    })  })}

页面开发就说这么多，下面进入视频处理部分，这里使用的本地视频，首先把视频文件拖进rawfile文件夹中，然后使用video组件播放视频：

Video({  src: $rawfile('movie.mp4'),  controller: this.controller})  
.width('100%')  
.height(this.isLandscapeStart?'100%':this.screen_width * 9 / 16)  
.autoPlay(true)  
.controls(false)  
.objectFit(ImageFit.Cover)  
.loop(false)

Video组件提供了工具栏和全屏方法，不过效果不好，非常丑陋，实际项目中我们通常需要自定义工具栏，全屏也通过设置组件的宽高尺寸来实现，我这里就简单添加一个全屏按钮，下面演示一下如何对视频进行横竖屏切换。

设置横屏，也就是全屏模式的步骤分别是先获取到当前窗口，然后将状态栏、导航栏隐藏，再将窗口横屏，相关代码如下：

changeOrientation() {  // 获取UIAbility实例的上下文信息  let context = getContext(this);  // 调用该接口手动改变设备横竖屏状态（设置全屏模式，先强制横屏，再加上传感器模式）  window.getLastWindow(context).then((lastWindow) => {    if (this.isLandscapeStart) {      // 设置窗口的布局是否为沉浸式布局      lastWindow.setWindowLayoutFullScreen(true).then(() => {        // 设置窗口全屏模式时导航栏、状态栏的可见模式        lastWindow.setWindowSystemBarEnable([]);        // 设置窗口的显示方向属性，AUTO_ROTATION_LANDSCAPE表示传感器自动横向旋转模式        lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE, () => {          this.isLandscape = !this.isLandscape;        });      });    } });}

退出全屏时将上面代码反向操作就行了。