当前位置：首页 > article >正文

11_17日项目笔记——制作“全屏播放页面”

article 2025/2/25 11:11:46

创建项目：

项目需求：要实现的页面效果

使用相对布局（Relative）：

所需图片资源需要请点击我https://download.csdn.net/download/m0_73992525/90009094?spm=1001.2014.3001.5503

修改默认启动页面

此时应用启动默认加载首页Index.ets，要将其修改于一下，让其默认加载‘全屏播放页面’

在“FullscreePlay”页面即将显示时，将屏幕横屏过来

1、将屏幕设置为全屏

设置全屏前：

设置全屏后：

前后对比：

2、将屏幕设置为横屏

内容方面：

首选相对布局：

相对容器的使用方法：

相对布局官方指导文档点我！

设置锚点

做微调的方式：

使用margin（外边距）做微调，会影响周围兄弟元素
使用offset，不会影响周围的兄弟元素，起点为自己的默认设置，移走后，不释放所占的空间
使用position（绝对定位）--- 起点为父容器的左上角，移走后释放所占的空间

使用Video

1、静态页面设计：

背景视频

先用Row代替，设置背景颜色

播放/暂停按钮

顶部的后退按钮+标题+更多

底部播放控制条

注意：progress默认宽度为100%，会导致一行内容溢出，使用layoutweight()布局权重，此时为收缩

添加小圆饼（在进度条上）

相对容器会随着页面滚动而滚动，stack（层叠布局不会随着页面滚动而滚动！）

progress进度条与小圆饼是一起的，所以要在一个容器中，可用将他们两个放入一个容器，用Row更简单！

记住：此时进度条的权重就不是加给Progress，而是加给外层的Row组件。

如何调整小圆饼位置：

做微调的方式：

使用margin（外边距）做微调，会影响周围兄弟元素
使用offset，不会影响周围的兄弟元素
使用position（绝对定位）

最外层背景颜色改为黑色：

使用position更合适，可以使其向上走一点

完整代码:

// 底部的播放控制条
      Row({space:15}){
        // 进行时长
        Text('03:23')
          .fontColor('#fff')

        // 进度条
        Row(){
          // 进度条
          Progress({
            value:50
          })
            .backgroundColor('#fff')    //背景色，未进行的进度条颜色
            .color('#E89E42')     //进行过的进度条颜色

          // 小圆饼
          Row()
            .width(20)
            .height(20)
            .borderRadius(50)
            .backgroundColor('#fff')
            // .offset({x:-60,y:0})    //①margin②offset（起点为自己的默认位置）③position
            .position({x:0,y:-8})

        }.layoutWeight(1)

最

静态页面基本完成：

完整代码：

import { window } from '@kit.ArkUI'

@Entry
@Component
struct Demo1 {
  async aboutToAppear(){
   let w = await window.getLastWindow(getContext())
    w.setWindowLayoutFullScreen(true)
    w.setPreferredOrientation(window.Orientation.LANDSCAPE)
  }

  build() {
    RelativeContainer(){
      //最底部视频
      Row(){}
      .width('100%')
      .height('100%')
      // .backgroundColor('#000')
      // 顶部的后退按钮+标题+更多
      Row(){
        // 返回按钮
        Image('/images/back.svg')
          .width(9)
        // 文本
        Text('Axure RP9教程：手把手教你制作交互案例')
          .fontColor('#fff')
          .layoutWeight(1)    //布局权重为1，占用剩余 所有的剩余空间
          .margin({left:20})
        // 更多按钮
          Image('/images/more.svg')
            .width(20)
            .fillColor('#fff')

      }
      .width('100%')
      .padding({left:20,right:20,top:20})

      // 播放/暂停按钮
      Image('/images/play2.svg')
        .width(50)
        .height(50)
        .alignRules({
          middle:{anchor:'__container__',align:HorizontalAlign.Center},
          center:{anchor:'__container__',align:VerticalAlign.Center}
        })

      // 底部的播放控制条
      Row({space:15}){
        // 进行时长
        Text('03:23')
          .fontColor('#fff')

        // 进度条
        Row(){
          // 进度条
          Progress({
            value:50
          })
            .backgroundColor('#fff')    //背景色，未进行的进度条颜色
            .color('#E89E42')     //进行过的进度条颜色

          // 小圆饼
          Row()
            .width(20)
            .height(20)
            .borderRadius(50)
            .backgroundColor('#fff')
            // .offset({x:-60,y:0})    //①margin②offset（起点为自己的默认位置）③position
            .position({x:0,y:-8})

        }.layoutWeight(1)

        // 总时长
        Text('05:31')
          .fontColor('#fff')

        // 清晰度
        Text('标清')
          .fontColor('#fff')

        //收缩
        Image('/images/zoomin.svg')
          .width(15)

      }
      .width('100%')
      .padding({left:20,right:20,bottom:20})
      .alignRules({
        bottom:{anchor:'__container__',align:VerticalAlign.Bottom}
      })


    }
    .height('100%')
    .width('100%')
    .backgroundColor('#fdd')
  }
}