鸿蒙-全屏播放页面（使用相对布局）---持续更新中

最终实现效果图：

实现步骤

创建FullScreenPlay.ets全品播放页面

并将其修改为启动页面。

全屏播放，屏幕必然横过来，所以要将窗口横过来。

编辑

src/main/ets/entryability/EntryAbility.ets

若写在/EntryAbility.ets中，则所有窗口都是横屏，因此不应该写在UIAbility中，应该写在全屏播放的页面中。是个跳转。

当页面即将显示时，设置窗口显示方向为“横屏”。

编辑

这两个方法都可以，这两个方法有什么区别？

abouttoappear是所有组件都可以使用的方法，页面组件可以、局部组件也可以。

onPageShow（）页面组件才有，其他组件没有。

abouttoappear先一步调用，页面即将显示时调用，不会有渐变的过程，onpageshow页面显示出来时候才调用，会有渐变的过程。

旋转动画应该放在onpageshow中。

编辑

全屏播放页面应用

如果放在onPageShow（）中，会看到竖屏转换为横屏的效果。

如果放在aboutToAppear()中，一上来就会显示横屏，用户不会看到竖屏转换为横屏的效果。

我们这里使用aboutToAppear()

设置全屏

async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.PORTRAIT) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
}

横屏显示

竖屏（肖像画）：window.Orientation.PORTRAIT,

横屏（风景画）：window.Orientation.LANDSCAPE

async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.PORTRAIT) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
}

考虑到性能，使用相对布局容器

背景色撑满整个屏幕

微调元素边距的三种方式

.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素

.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素

.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素

静态页面实现

1、顶部条 和 暂停

import { window } from '@kit.ArkUI';@Entry@Componentstruct FullScreenPlay {// 当页面即将显示时，设置窗口显示方向为“横屏”。async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE}build() {RelativeContainer() {// 1、最底部的视频Row(){}.width('100%').height('100%').backgroundColor('#AAA')// 2、顶部的 后退按钮+标题+更多Row(){// 后退按钮Image('/images/back.svg').width(9).height(15).fillColor('#fff')// 标题Text('Axure RP9教程：手把手教你制作交互案例').fontSize(16).fontColor('#FCFCFC').layoutWeight(1) // 权重 1 表示占据剩余空间.margin({left:20})// 更多Image('/images/more.svg').width(24).fillColor('#fff')}.width('100%')// .backgroundColor('#110').padding({left:20 , right:20, top:20})// 3、播放/暂停按钮Image('/images/play2.svg').width(50).height(50).alignRules({middle: {anchor:'__container__', align: HorizontalAlign.Center},center: {anchor:'__container__', align: VerticalAlign.Center}})//   4、底部的播放控制条}.height('100%').width('100%').backgroundColor('#fdd')}}

2、底部进度条

//   4、底部的播放控制条
Row() {Text("03:23").fontSize(12).fontColor("#FFFFFF")Progress({value: 3.23 * 60,total: 5.31 * 60,type: ProgressType.Linear}).layoutWeight(1).margin({ left: 8, right: 15 }).backgroundColor('#fff').color('#f59a23')Text("05:31").fontSize(12).fontColor("#FFFFFF")Text("标清").fontSize(12).fontColor("#FFFFFF").margin({ left: 15, right: 15 })Image('/images/zoomin.svg').width(15).height(15)
}
.width('100%')// .backgroundColor(Color.Pink).alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).padding({ bottom: 20, left: 30, right: 30 })

完整代码：

import { window } from '@kit.ArkUI';@Entry@Componentstruct FullScreenPlay {// 当页面即将显示时，设置窗口显示方向为“横屏”。async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE}build() {RelativeContainer() {// 1、最底部的视频Row() {}.width('100%').height('100%').backgroundColor('#7f7f7f')// 2、顶部的 后退按钮+标题+更多Row() {// 后退按钮Image('/images/back.svg').width(9).height(15).fillColor('#fff')// 标题Text('Axure RP9教程：手把手教你制作交互案例').fontSize(16).fontColor('#FCFCFC').layoutWeight(1)// 权重 1 表示占据剩余空间.margin({ left: 20 })// 更多Image('/images/more.svg').width(24).fillColor('#fff')}.width('100%')// .backgroundColor('#110').padding({ left: 20, right: 20, top: 20 })// 3、播放/暂停按钮Image('/images/play2.svg').width(50).height(50).alignRules({middle: { anchor: '__container__', align: HorizontalAlign.Center },center: { anchor: '__container__', align: VerticalAlign.Center }})//   4、底部的播放控制条Row() {Text("03:23").fontSize(12).fontColor("#FFFFFF")Progress({value: 3.23 * 60,total: 5.31 * 60,type: ProgressType.Linear}).layoutWeight(1).margin({ left: 8, right: 15 }).backgroundColor('#fff').color('#f59a23')Text("05:31").fontSize(12).fontColor("#FFFFFF")Text("标清").fontSize(12).fontColor("#FFFFFF").margin({ left: 15, right: 15 })Image('/images/zoomin.svg').width(15).height(15)}.width('100%')// .backgroundColor(Color.Pink).alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).padding({ bottom: 20, left: 30, right: 30 })}.height('100%').width('100%').backgroundColor('#fdd')}}

3、添加进度条上的小圆饼

解决方法：

要调整小圆饼的位置：

微调小圆饼的位置-三种方法

1. .margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素 （会影响周围元素，不合适）
2. .offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素（）

1. .position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素（）

// 小圆饼
Row(){
}
.width(20).height(20).borderRadius(10).backgroundColor('#fff')// .offset({x:-60,y:0}).position({x: '60%',y: -8})

创建项目》创建FullScreenPlay.ets全品播放页面，并将其修改为启动页面。

全屏播放，屏幕必然横过来，所以要将窗口横过来。

编辑

src/main/ets/entryability/EntryAbility.ets

若写在/EntryAbility.ets中，则所有窗口都是横屏，因此不应该写在UIAbility中，应该写在全屏播放的页面中。是个跳转。

当页面即将显示时，设置窗口显示方向为“横屏”。

编辑

这两个方法都可以，这两个方法有什么区别？

abouttoappear是所有组件都可以使用的方法，页面组件可以、局部组件也可以。

onPageShow（）页面组件才有，其他组件没有。

abouttoappear先一步调用，页面即将显示时调用，不会有渐变的过程，onpageshow页面显示出来时候才调用，会有渐变的过程。

旋转动画应该放在onpageshow中。

编辑

全屏播放页面应用

如果放在onPageShow（）中，会看到竖屏转换为横屏的效果。

如果放在aboutToAppear()中，一上来就会显示横屏，用户不会看到竖屏转换为横屏的效果。

我们这里使用aboutToAppear()

设置全屏

async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.PORTRAIT) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
}

横屏显示

竖屏（肖像画）：window.Orientation.PORTRAIT,

横屏（风景画）：window.Orientation.LANDSCAPE

async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.PORTRAIT) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
}

考虑到性能，使用相对布局容器

撑满整个屏幕

微调边距的元素

.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素

.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素

.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素

静态页面实现

顶部条 和 暂停

import { window } from '@kit.ArkUI';@Entry@Componentstruct FullScreenPlay {// 当页面即将显示时，设置窗口显示方向为“横屏”。async aboutToAppear(): Promise<void> {// 得到窗口对象, 并设置窗口显示方向为“横屏”。let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)w.setWindowLayoutFullScreen(true) // 设置窗口全屏// 设置窗口显示方向为“横屏”。w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE}build() {RelativeContainer() {// 1、最底部的视频Row(){}.width('100%').height('100%').backgroundColor('#AAA')// 2、顶部的 后退按钮+标题+更多Row(){// 后退按钮Image('/images/back.svg').width(9).height(15).fillColor('#fff')// 标题Text('Axure RP9教程：手把手教你制作交互案例').fontSize(16).fontColor('#FCFCFC').layoutWeight(1) // 权重 1 表示占据剩余空间.margin({left:20})// 更多Image('/images/more.svg').width(24).fillColor('#fff')}.width('100%')// .backgroundColor('#110').padding({left:20 , right:20, top:20})// 3、播放/暂停按钮Image('/images/play2.svg').width(50).height(50).alignRules({middle: {anchor:'__container__', align: HorizontalAlign.Center},center: {anchor:'__container__', align: VerticalAlign.Center}})//   4、底部的播放控制条}.height('100%').width('100%').backgroundColor('#fdd')}}

底部进度条

//   4、底部的播放控制条
Row() {Text("03:23").fontSize(12).fontColor("#FFFFFF")Progress({value: 3.23 * 60,total: 5.31 * 60,type: ProgressType.Linear}).layoutWeight(1).margin({ left: 8, right: 15 }).backgroundColor('#fff').color('#f59a23')Text("05:31").fontSize(12).fontColor("#FFFFFF")Text("标清").fontSize(12).fontColor("#FFFFFF").margin({ left: 15, right: 15 })Image('/images/zoomin.svg').width(15).height(15)
}
.width('100%')
// .backgroundColor(Color.Pink)
.alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.padding({ bottom: 20, left: 30, right: 30 })