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

最终实现效果图：

实现步骤

创建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
  @Component
  struct 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
  @Component
  struct 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、添加进度条上的小圆饼

解决方法：

要调整小圆饼的位置：

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

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

.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
  @Component
  struct 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 })

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

最终实现效果图：

实现步骤

创建FullScreenPlay.ets全品播放页面

设置全屏

横屏显示

背景色撑满整个屏幕

微调元素边距的三种方式

静态页面实现

1、顶部条和暂停

2、底部进度条

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

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

设置全屏

横屏显示

撑满整个屏幕

微调边距的元素

静态页面实现

网站公告

今日签到

热门文章

最新发布

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

最终实现效果图：

实现步骤

创建FullScreenPlay.ets全品播放页面

设置全屏

横屏显示

背景色撑满整个屏幕

微调元素边距的三种方式

静态页面实现

1、顶部条 和 暂停

2、底部进度条

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

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

设置全屏

横屏显示

撑满整个屏幕

微调边距的元素

静态页面实现

网站公告

今日签到

热门文章

最新发布

1、顶部条和暂停