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

news2025/3/31 13:48:50

最终实现效果图:

实现步骤

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

解决方法:

要调整小圆饼的位置:

微调小圆饼的位置-三种方法
  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
  @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 })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2323426.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

全面讲解python的uiautomation包

在常规的模拟鼠标和键盘操作&#xff0c;我们一般使用pyautogui&#xff0c;uiautomation模块不仅能直接支持这些操作&#xff0c;还能通过控件定位方式直接定位到目标控件的位置&#xff0c;而不需要自己去获取对应坐标位置。uiautomation模块不仅支持任意坐标位置截图&#x…

CentOS 7 源码安装libjsoncpp-1.9.5库

安装依赖工具 sudo yum install cmake make gcc cmake 需要升级至 3.8.0 以上可参考&#xff1a;CentOS安装CMakegcc 需要升级至9.0 以上可参考&#xff1a;CentOS 7升级gcc版本 下载源码 wget https://github.com/open-source-parsers/jsoncpp/archive/refs/tags/1.9.5.…

备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊

提示&#xff1a;本篇文章仅仅是作者自己目前在备赛蓝桥杯中&#xff0c;自己学习与刷题的学习笔记&#xff0c;写的不好&#xff0c;欢迎大家批评与建议 由于个别题目代码量与题目量偏大&#xff0c;请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…

Windows下docker使用教程

docker安装 镜像制作镜像加载容器创建更新镜像导出镜像 Windows10安装dockerdocker image制作docker 镜像加载docker 容器创建更新imageimage 导出为.tar文件 #以Windows10 、11为例 linux和Windows区别在于docker安装的程序是哪个操作系统的&#xff0c;后面的内容其实不变 …

Java项目生成接口文档的方案

文章目录 问题&#xff1a;Java项目生成接口文档的方案方案一&#xff1a;Swagger3.0方案二&#xff1a;Apipost两者对比 问题&#xff1a;Java项目生成接口文档的方案 需求 1、需要生成生成时间&#xff0c;作者名称&#xff0c;项目名称&#xff0c;接口名称&#xff0c;请…

案例实践 | 招商局集团以长安链构建“基于DID的航运贸易数据资产目录链”

概览 案例名称 基于DID的航运贸易数据资产目录链 业主单位 招商局集团 上线时间 2024年10月 用户群体 供数用数企业和个人 用户规模 集团内20企业 案例背景 招商局集团深入落实“促进数据高效流通使用、赋能实体经济”精神&#xff0c;深化集团数字化水平&#xff0c…

2025年移动端开发性能优化实践与趋势分析

启动速度优化 本质&#xff1a;缩短首次可见帧渲染时间。 方法&#xff1a; iOS&#xff1a;利用Core ML本地模型轻量化部署&#xff0c;减少云端等待。Android&#xff1a;强制启用SplashScreen API&#xff0c;通过setKeepOnScreenCondition控制动画时长。冷启动需将耗时操…

Docker Compose介绍

基本概念 Docker-Compose是Docker官方的开源项目&#xff0c;负责实现对docker容器集群的快速编排。 可以这么理解&#xff0c;docker compose是docker提出的一个工具软件&#xff0c;可以管理多个docker容器组成一个应用&#xff0c;只需要编写一个YAML格式的配置文件docker…

头歌实践教学平台--【数据库概论】--SQL

一、表结构与完整性约束的修改(ALTER) 1.修改表名 USE TestDb1; alter table your_table rename TO my_table; 2.添加与删除字段 #语句1&#xff1a;删除表orderDetail中的列orderDate alter table orderDetail drop orderDate; #语句2&#xff1a;添加列unitPrice alter t…

算法基础——模拟

目录 1 多项式输出 2.蛇形方阵 3.字符串的展开 模拟&#xff0c;顾名思义&#xff0c;就是题⽬让你做什么你就做什么&#xff0c;考察的是将思路转化成代码的代码能⼒。这类题⼀般较为简单&#xff0c;属于竞赛⾥⾯的签到题&#xff08;但是&#xff0c;万事⽆绝对&#xff…

【第30节】MFC编程:ListCtrl控件和TreeCtrl控件

目录 引言 一、高级控件ListCtrl 二、高级控件TreeCtrl 三、Shell控件 四、CImageList 五、综合代码示例 引言 在MFC编程里&#xff0c;高级控件能大幅提升应用程序的交互性与功能性。接下来&#xff0c;咱们会详细讲讲ListCtrl和TreeCtrl这两个高级控件。不仅会介绍它们…

JavaScript 手写 call、apply、bind 和 new

1. 手写 call 方法 核心思路&#xff1a;改变函数的 this 指向并立即执行&#xff0c;通过将函数临时挂载到目标对象上调用。 Function.prototype.myCall function (context, ...args) {// 如果 context 为 null 或 undefined&#xff0c;则默认为 windowcontext context |…

计算机网络基础:量子通信技术在网络中的应用前景

计算机网络基础:量子通信技术在网络中的应用前景 一、前言二、量子通信技术基础2.1 量子通信的基本概念2.2 量子通信的主要原理2.2.1 量子密钥分发(QKD)原理2.2.2 量子隐形传态原理三、量子通信技术的特点3.1 绝对安全性3.2 超高通信速率潜力3.3 抗干扰能力强四、量子通信技…

Postman 下载文件指南:如何请求 Excel/PDF 文件?

在 Postman 中进行 Excel/PDF 文件的请求下载和导出&#xff0c;以下是简明的步骤&#xff0c;帮助你轻松完成任务。首先&#xff0c;我们将从新建接口开始&#xff0c;逐步引导你完成整个过程。 Postman 请求下载/导出 excel/pdf 文件教程

Stereolabs ZED Box Mini:机器人与自动化领域的人工智能视觉新选择

在人工智能视觉技术快速发展的今天&#xff0c;其应用场景正在持续拓宽&#xff0c;从智能安防到工业自动化&#xff0c;从机器人技术到智能交通&#xff0c;各领域都在积极探索如何利用这一先进技术。而 Stereolabs 推出的ZED Box Mini&#xff0c;正是一款专为满足这些多样化…

arm之s3c2440的I2C的用法

基础概念 IC&#xff08;Inter-Integrated Circuit&#xff09;又称I2C&#xff0c;是是IICBus简称&#xff0c;所以中文应该叫集成电路总线。 IIC的总线的使用场景&#xff0c;所有挂载在IIC总线上的设备都有两根信号线&#xff0c;一根是数据线SDA&#xff0c;另一 根是时钟…

redis部署架构

一.redis多实例 如上图所示&#xff0c;我们经常使用实例的端口号来作为实例的安装目录名称。 1.创建实例安装目录 如上图所示&#xff0c;这是创建实例的安装目录&#xff0c; 2.拷贝实例的配置文件 如上图所示&#xff0c;将redis解压目录下的配置文件拷贝到对应的conf目录…

深入理解指针(4)(C语言版)

文章目录 前言一、回调函数是什么&#xff08;一&#xff09;定义&#xff08;二&#xff09;工作原理&#xff08;三&#xff09;应用场景 二、qsort举例&#xff08;一&#xff09;qsort函数简介&#xff08;二&#xff09;比较函数的定义&#xff08;三&#xff09;使用示例…

【HTML】验证与调试工具

个人主页&#xff1a;Guiat 归属专栏&#xff1a;HTML CSS JavaScript 文章目录 1. HTML 验证工具概述1.1 验证的重要性1.2 常见 HTML 错误类型 2. W3C 验证服务2.1 W3C Markup Validation Service2.2 使用 W3C 验证器2.3 验证结果解读 3. 浏览器开发者工具3.1 Chrome DevTools…

​​SenseGlove与Aeon Robotics携手推出HEART项目,助力机器人培训迈向新台阶

在自动化和机器人技术快速发展的今天&#xff0c;SenseGlove和Aeon Robotics联合推出了一项创新项目——HEART项目。该项目在欧盟资助的MasterXR框架内展开&#xff0c;旨在通过整合虚拟现实&#xff08;VR&#xff09;、力反馈触觉手套&#xff08;SenseGlove项目Rembrandt&am…