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

火影  论坛元老 | 5 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1936|帖子 1936|积分 5808

最终实现结果图：


实现步调

创建FullScreenPlay.ets全品播放页面

并将其修改为启动页面。


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


编辑
src/main/ets/entryability/EntryAbility.ets
若写在/EntryAbility.ets中，则全部窗口都是横屏，因此不应该写在UIAbility中，应该写在全屏播放的页面中。是个跳转。
当页面即将显示时，设置窗口显示方向为“横屏”。


编辑
这两个方法都可以，这两个方法有什么区别？
abouttoappear是全部组件都可以使用的方法，页面组件可以、局部组件也可以。
onPageShow（）页面组件才有，其他组件没有。
abouttoappear先一步调用，页面即将显示时调用，不会有渐变的过程，onpageshow页面显示出来时间才调用，会有渐变的过程。
旋转动画应该放在onpageshow中。


编辑
全屏播放页面应用
如果放在onPageShow（）中，会看到竖屏转换为横屏的结果。
如果放在aboutToAppear()中，一上来就会显示横屏，用户不会看到竖屏转换为横屏的结果。
我们这里使用aboutToAppear()
设置全屏

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

横屏显示

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

思量到性能，使用相对布局容器
背景致撑满整个屏幕



微调元素边距的三种方式

.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素
.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素
.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素
静态页面实现

1、顶部条 和 停息

  1. import { window } from '@kit.ArkUI';
  3. @Entry
  4.   @Component
  5.   struct FullScreenPlay {
  6.     // 当页面即将显示时，设置窗口显示方向为“横屏”。
  7.     async aboutToAppear(): Promise<void> {
  8.       // 得到窗口对象, 并设置窗口显示方向为“横屏”。
  9.       let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)
  10.       w.setWindowLayoutFullScreen(true) // 设置窗口全屏
  11.       // 设置窗口显示方向为“横屏”。
  12.       w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
  13.     }
  15.     build() {
  16.       RelativeContainer() {
  17.         // 1、最底部的视频
  18.         Row(){
  19.         }
  20.         .width('100%')
  21.           .height('100%')
  22.           .backgroundColor('#AAA')
  24.         // 2、顶部的 后退按钮+标题+更多
  25.         Row(){
  26.           // 后退按钮
  27.           Image('/images/back.svg')
  28.             .width(9)
  29.             .height(15)
  30.             .fillColor('#fff')
  31.           // 标题
  32.           Text('Axure RP9教程：手把手教你制作交互案例')
  33.             .fontSize(16)
  34.             .fontColor('#FCFCFC')
  35.             .layoutWeight(1) // 权重 1 表示占据剩余空间
  36.             .margin({left:20})
  37.           // 更多
  38.           Image('/images/more.svg')
  39.             .width(24)
  40.             .fillColor('#fff')
  41.         }
  42.         .width('100%')
  43.           // .backgroundColor('#110')
  44.           .padding({left:20 , right:20, top:20})
  46.         // 3、播放/暂停按钮
  48.         Image('/images/play2.svg')
  49.           .width(50)
  50.           .height(50)
  51.           .alignRules({
  52.             middle: {anchor:'__container__', align: HorizontalAlign.Center},
  53.             center: {anchor:'__container__', align: VerticalAlign.Center}
  54.           })
  56.         //   4、底部的播放控制条
  58.       }
  59.       .height('100%')
  60.         .width('100%')
  61.         .backgroundColor('#fdd')
  63.     }
  64.   }
复制代码

2、底部进度条

  1. //   4、底部的播放控制条
  2. Row() {
  3.   Text("03:23")
  4.     .fontSize(12)
  5.     .fontColor("#FFFFFF")
  7.   Progress({
  8.     value: 3.23 * 60,
  9.     total: 5.31 * 60,
  10.     type: ProgressType.Linear
  11.   })
  12.     .layoutWeight(1)
  13.     .margin({ left: 8, right: 15 })
  14.     .backgroundColor('#fff')
  15.     .color('#f59a23')
  17.   Text("05:31")
  18.     .fontSize(12)
  19.     .fontColor("#FFFFFF")
  21.   Text("标清")
  22.     .fontSize(12)
  23.     .fontColor("#FFFFFF")
  24.     .margin({ left: 15, right: 15 })
  26.   Image('/images/zoomin.svg')
  27.     .width(15)
  28.     .height(15)
  29. }
  30. .width('100%')
  31.   // .backgroundColor(Color.Pink)
  32.   .alignRules({
  33.     bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  34.     middle: { anchor: '__container__', align: HorizontalAlign.Center }
  35.   })
  36.   .padding({ bottom: 20, left: 30, right: 30 })
复制代码

完整代码：
  1. import { window } from '@kit.ArkUI';
  3. @Entry
  4.   @Component
  5.   struct FullScreenPlay {
  6.     // 当页面即将显示时，设置窗口显示方向为“横屏”。
  7.     async aboutToAppear(): Promise<void> {
  8.       // 得到窗口对象, 并设置窗口显示方向为“横屏”。
  9.       let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
  10.       w.setWindowLayoutFullScreen(true) // 设置窗口全屏
  11.       // 设置窗口显示方向为“横屏”。
  12.       w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
  13.     }
  15.     build() {
  16.       RelativeContainer() {
  17.         // 1、最底部的视频
  18.         Row() {
  19.         }
  20.         .width('100%')
  21.           .height('100%')
  22.           .backgroundColor('#7f7f7f')
  24.         // 2、顶部的 后退按钮+标题+更多
  25.         Row() {
  26.           // 后退按钮
  27.           Image('/images/back.svg')
  28.             .width(9)
  29.             .height(15)
  30.             .fillColor('#fff')
  31.           // 标题
  32.           Text('Axure RP9教程：手把手教你制作交互案例')
  33.             .fontSize(16)
  34.             .fontColor('#FCFCFC')
  35.             .layoutWeight(1)// 权重 1 表示占据剩余空间
  36.             .margin({ left: 20 })
  37.           // 更多
  38.           Image('/images/more.svg')
  39.             .width(24)
  40.             .fillColor('#fff')
  41.         }
  42.         .width('100%')
  43.           // .backgroundColor('#110')
  44.           .padding({ left: 20, right: 20, top: 20 })
  46.         // 3、播放/暂停按钮
  48.         Image('/images/play2.svg')
  49.           .width(50)
  50.           .height(50)
  51.           .alignRules({
  52.             middle: { anchor: '__container__', align: HorizontalAlign.Center },
  53.             center: { anchor: '__container__', align: VerticalAlign.Center }
  54.           })
  56.         //   4、底部的播放控制条
  57.         Row() {
  58.           Text("03:23")
  59.             .fontSize(12)
  60.             .fontColor("#FFFFFF")
  62.           Progress({
  63.             value: 3.23 * 60,
  64.             total: 5.31 * 60,
  65.             type: ProgressType.Linear
  66.           })
  67.             .layoutWeight(1)
  68.             .margin({ left: 8, right: 15 })
  69.             .backgroundColor('#fff')
  70.             .color('#f59a23')
  72.           Text("05:31")
  73.             .fontSize(12)
  74.             .fontColor("#FFFFFF")
  76.           Text("标清")
  77.             .fontSize(12)
  78.             .fontColor("#FFFFFF")
  79.             .margin({ left: 15, right: 15 })
  81.           Image('/images/zoomin.svg')
  82.             .width(15)
  83.             .height(15)
  84.         }
  85.         .width('100%')
  86.           // .backgroundColor(Color.Pink)
  87.           .alignRules({
  88.             bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  89.             middle: { anchor: '__container__', align: HorizontalAlign.Center }
  90.           })
  91.           .padding({ bottom: 20, left: 30, right: 30 })
  93.       }
  94.       .height('100%')
  95.         .width('100%')
  96.         .backgroundColor('#fdd')
  98.     }
  99.   }
复制代码
3、添加进度条上的小圆饼







办理方法：
要调整小圆饼的位置：
微调小圆饼的位置-三种方法


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



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






  1. // 小圆饼
  2. Row(){
  3. }
  4. .width(20)
  5.   .height(20)
  6.   .borderRadius(10)
  7.   .backgroundColor('#fff')
  8.   // .offset({x:-60,y:0})
  9.   .position({
  10.     x: '60%',
  11.     y: -8
  12.   })
复制代码







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



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



编辑
src/main/ets/entryability/EntryAbility.ets
若写在/EntryAbility.ets中，则全部窗口都是横屏，因此不应该写在UIAbility中，应该写在全屏播放的页面中。是个跳转。
当页面即将显示时，设置窗口显示方向为“横屏”。



编辑
这两个方法都可以，这两个方法有什么区别？
abouttoappear是全部组件都可以使用的方法，页面组件可以、局部组件也可以。
onPageShow（）页面组件才有，其他组件没有。
abouttoappear先一步调用，页面即将显示时调用，不会有渐变的过程，onpageshow页面显示出来时间才调用，会有渐变的过程。
旋转动画应该放在onpageshow中。



编辑
全屏播放页面应用
如果放在onPageShow（）中，会看到竖屏转换为横屏的结果。
如果放在aboutToAppear()中，一上来就会显示横屏，用户不会看到竖屏转换为横屏的结果。
我们这里使用aboutToAppear()

设置全屏

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


横屏显示

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


思量到性能，使用相对布局容器
撑满整个屏幕






微调边距的元素

.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素
.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素
.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素
静态页面实现

顶部条 和 停息
  1. import { window } from '@kit.ArkUI';
  3. @Entry
  4.   @Component
  5.   struct FullScreenPlay {
  6.     // 当页面即将显示时，设置窗口显示方向为“横屏”。
  7.     async aboutToAppear(): Promise<void> {
  8.       // 得到窗口对象, 并设置窗口显示方向为“横屏”。
  9.       let w = await window.getLastWindow(getContext())  // 获取最后一个窗口(最近显示的窗口对象)
  10.       w.setWindowLayoutFullScreen(true) // 设置窗口全屏
  11.       // 设置窗口显示方向为“横屏”。
  12.       w.setPreferredOrientation(window.Orientation.LANDSCAPE) //  竖屏（肖像画）：window.Orientation.PORTRAIT, 横屏（风景画）：window.Orientation.LANDSCAPE
  13.     }
  15.     build() {
  16.       RelativeContainer() {
  17.         // 1、最底部的视频
  18.         Row(){
  19.         }
  20.         .width('100%')
  21.           .height('100%')
  22.           .backgroundColor('#AAA')
  24.         // 2、顶部的 后退按钮+标题+更多
  25.         Row(){
  26.           // 后退按钮
  27.           Image('/images/back.svg')
  28.             .width(9)
  29.             .height(15)
  30.             .fillColor('#fff')
  31.           // 标题
  32.           Text('Axure RP9教程：手把手教你制作交互案例')
  33.             .fontSize(16)
  34.             .fontColor('#FCFCFC')
  35.             .layoutWeight(1) // 权重 1 表示占据剩余空间
  36.             .margin({left:20})
  37.           // 更多
  38.           Image('/images/more.svg')
  39.             .width(24)
  40.             .fillColor('#fff')
  41.         }
  42.         .width('100%')
  43.           // .backgroundColor('#110')
  44.           .padding({left:20 , right:20, top:20})
  46.         // 3、播放/暂停按钮
  48.         Image('/images/play2.svg')
  49.           .width(50)
  50.           .height(50)
  51.           .alignRules({
  52.             middle: {anchor:'__container__', align: HorizontalAlign.Center},
  53.             center: {anchor:'__container__', align: VerticalAlign.Center}
  54.           })
  56.         //   4、底部的播放控制条
  58.       }
  59.       .height('100%')
  60.         .width('100%')
  61.         .backgroundColor('#fdd')
  63.     }
  64.   }
复制代码


底部进度条
  1. //   4、底部的播放控制条
  2. Row() {
  3.   Text("03:23")
  4.     .fontSize(12)
  5.     .fontColor("#FFFFFF")
  7.   Progress({
  8.     value: 3.23 * 60,
  9.     total: 5.31 * 60,
  10.     type: ProgressType.Linear
  11.   })
  12.     .layoutWeight(1)
  13.     .margin({ left: 8, right: 15 })
  14.     .backgroundColor('#fff')
  15.     .color('#f59a23')
  17.   Text("05:31")
  18.     .fontSize(12)
  19.     .fontColor("#FFFFFF")
  21.   Text("标清")
  22.     .fontSize(12)
  23.     .fontColor("#FFFFFF")
  24.     .margin({ left: 15, right: 15 })
  26.   Image('/images/zoomin.svg')
  27.     .width(15)
  28.     .height(15)
  29. }
  30. .width('100%')
  31. // .backgroundColor(Color.Pink)
  32. .alignRules({
  33.   bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  34.   middle: { anchor: '__container__', align: HorizontalAlign.Center }
  35. })
  36. .padding({ bottom: 20, left: 30, right: 30 })
复制代码






免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

火影

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表