最近忙忙活活写了不少教程，但是总感觉千篇一律，没什么意思，大家如果有感兴趣的项目可以私信给幽蓝君写一写。
今天分享一个电影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; }); }); } });}退出全屏时将上面代码反向操作就行了。
