鸿蒙Next开发实战教程—电影app

news2025/3/19 5:47:40

最近忙忙活活写了不少教程,但是总感觉千篇一律,没什么意思,大家如果有感兴趣的项目可以私信给幽蓝君写一写。

今天分享一个电影App。

动图封面

这个项目也比较简单,主要是一些简单页面的开发和本地视频的播放以及横竖屏切换。

页面搭建以首页为例,很明显这是一个List页面,不过每一个部分都可以左右滑动,顶部banner部分是支持翻页的,所以使用Swiper组件实现,其他部分均使用Scroll组件实现。相关代码如下:

build()
 {
  List(){
    ListItem(){
      Swiper(){
        Image($r('app.media.headimg'))
          .width('100%')
          .height(380)
          .objectFit(ImageFit.Fill)
          .onClick(()=>{
            router.pushUrl({
              url:'pages/Info'
            })
          })
      }
    }
    ListItemGroup({header:this.ListHeader('分类',false)}){
      ListItem(){
        Scroll(){
          Row(){
            ForEach(this.types,(str:string,index)=>{
              Text(str)
                .fontSize(15)
                .fontColor(Color.White) 
               .padding({top:8,bottom:8,left:22,right:22})
                .borderRadius(15)
                .backgroundColor(this.currentType == index ? '#6152FF':'rgb(6,4,31)')                .onClick(()=>{                  router.pushUrl({                    url:'pages/MovieList'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})    ListItemGroup({header:this.ListHeader('最受欢迎',true)}){      ListItem(){        Scroll(){          Row({space:10}){            ForEach(this.popularMovies,(img:Resource,index)=>{              Image(img)                .width(124)                .height(180)                .objectFit(ImageFit.Contain)                .borderRadius(10)                .onClick(()=>{                  router.pushUrl({                    url:'pages/Info'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})    ListItemGroup({header:this.ListHeader('最新电影',true)}){      ListItem(){        Scroll(){          Row({space:10}){            ForEach(this.popularMovies,(img:Resource,index)=>{              Image(img)                .width(124)                .height(180)                .objectFit(ImageFit.Contain)                .borderRadius(10)                .onClick(()=>{                  router.pushUrl({                    url:'pages/Info'                  })                })            })          }        }        .scrollable(ScrollDirection.Horizontal)        .scrollBar(BarState.Off)        .width('100%')      }    }    .padding({left:12,right:12})  }  .width('100%')  .height('100%')  .backgroundColor('rgb(6,4,31)')}@Builder ListHeader(title:string,isRight:boolean){  Row(){    Text(title)      .fontColor(Color.White)      .fontSize(15)    if(isRight){      Text('查看全部')        .fontColor(Color.White)        .fontSize(11)    }  }  .alignItems(VerticalAlign.Center)  .width('100%')  .height(40)  .justifyContent(FlexAlign.SpaceBetween)  .onClick(()=>{    router.pushUrl({      url:'pages/MovieList'    })  })}

页面开发就说这么多,下面进入视频处理部分,这里使用的本地视频,首先把视频文件拖进rawfile文件夹中,然后使用video组件播放视频:

Video({  src: $rawfile('movie.mp4'),  controller: this.controller})  
.width('100%')  
.height(this.isLandscapeStart?'100%':this.screen_width * 9 / 16)  
.autoPlay(true)  
.controls(false)  
.objectFit(ImageFit.Cover)  
.loop(false)

Video组件提供了工具栏和全屏方法,不过效果不好,非常丑陋,实际项目中我们通常需要自定义工具栏,全屏也通过设置组件的宽高尺寸来实现,我这里就简单添加一个全屏按钮,下面演示一下如何对视频进行横竖屏切换。

设置横屏,也就是全屏模式的步骤分别是先获取到当前窗口,然后将状态栏、导航栏隐藏,再将窗口横屏,相关代码如下:

changeOrientation() {  
  // 获取UIAbility实例的上下文信息  
  let context = getContext(this);  
  // 调用该接口手动改变设备横竖屏状态(设置全屏模式,先强制横屏,再加上传感器模式)  
  window.getLastWindow(context).then((lastWindow) => {    
    if (this.isLandscapeStart) {      
      // 设置窗口的布局是否为沉浸式布局      
      lastWindow.setWindowLayoutFullScreen(true).then(() => {        
        // 设置窗口全屏模式时导航栏、状态栏的可见模式        
        lastWindow.setWindowSystemBarEnable([]);        
        // 设置窗口的显示方向属性,AUTO_ROTATION_LANDSCAPE表示传感器自动横向旋转模式        
        lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE, () => {          
          this.isLandscape = !this.isLandscape;        
        });      
      });    
    } 
   });
 }

退出全屏时将上面代码反向操作就行了。

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

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

相关文章

停车场停车位数据集,标注停车位上是否有车,平均正确识别率99.5%,支持yolov5-11, coco json,darknet,xml格式标注

停车场停车位数据集,标注停车位上是否有车,平均正确识别率98.0%,支持yolov5-11, coco json,darknet,xml格式标注 数据集-识别停车场所有车辆的数据集 数据集分割 一共184张图片 训练组 89&am…

ssm框架之mybatis框架讲解

1,Mybatis 1.1 Mybatis概述 1.1.1 Mybatis概念 MyBatis 是一款优秀的持久层框架,用于简化 JDBC 开发 MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis 。2…

CEF 多进程模式时,注入函数,获得交互信息

CEF 控制台添加一函数,枚举 注册的供前端使用的CPP交互函数有哪些-CSDN博客 上篇文章,是在模拟环境,单进程中设置的,这篇文章,将其改到正常多进程环境中设置。 对应于工程中的 CEF_RENDER项目 一、多进程模式中,改写 修改步骤 1、注入函数 client_app_render.cpp 在…

Androidstudio出现警告warning:意外的元素

这些警告信息通常与 Android SDK 或系统镜像的配置文件有关,可能是由于 SDK 工具或系统镜像的版本不兼容或配置文件格式发生了变化。以下是解决这些警告的步骤: 1. 更新 Android SDK 工具 确保你使用的是最新版本的 Android SDK 工具: 打开…

深入了解Linux —— git三板斧

版本控制器git 为了我们方便管理不同版本的文件,就有了版本控制器; 所谓的版本控制器,就是能够了解到一个文件的历史记录(修改记录);简单来说就是记录每一次的改动和版本迭代的一个管理系统,同…

【软件系统架构】单体架构

一、引言 在软件开发的漫长历程中,架构的选择一直是至关重要的决策。单体架构作为一种经典的架构模式,曾经在许多项目中发挥着不可替代的作用。虽然如今微服务等架构逐渐流行,但理解单体架构对于深入掌握软件架构体系仍然有着重要意义。 二、…

【求助】【建议放弃】【谷粒商城版】Kubernetes

本文作者: slience_me 文章目录 Kubernetes【谷粒商城版】【建议放弃】1. docker安装2. kubernetes安装前3. kubeadm,kubelet,kubectl3.1 简介kubeadmkubeletkubectl常用指令 3.2 安装3.3 kubeadm初始化3.4 加入从节点(工作节点)3.5 安装Pod网络插件(CNI…

C# Unity 唐老狮 No.10 模拟面试题

本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho C# 1. 内存中,堆和…

第十五届蓝桥杯2024JavaB组省赛试题A:报数游戏

简单的找规律题目。题目给得数列,第奇数项是20的倍数,第偶数项时24的倍数。题目要求第n 202420242024 项是多少。这一项是偶数,所以答案一定是24的倍数,并且偶数项的个数和奇数项的个数各占一半,所以最终的答案ans( n…

Matlab 汽车二自由度转弯模型

1、内容简介 Matlab 187-汽车二自由度转弯模型 可以交流、咨询、答疑 2、内容说明 略 摘 要 本文前一部分提出了侧偏角和横摆角速度作为参数。描述了车辆运动的运动状态,其中文中使用的参考模型是二自由度汽车模型。汽车速度被认为是建立基于H.B.Pacejka的轮胎模…

学c++的人可以几天速通python?

学了俩天啊,文章写纸上了 还是蛮有趣的

Rocky Linux 9.x 基于 kubeadm部署k8s 1.32

一、部署说明 1、主机操作系统说明 序号操作系统及版本备注1Rocky Linux release 9下载链接:https://mirrors.163.com/rocky/9.5/isos/x86_64/Rocky-9.5-x86_64-minimal.iso 2、主机硬件配置说明 作用IP地址操作系统配置关键组件k8s-master01192.168.234.51Rocky…

解决git init 命令不显示.git

首先在自己的项目代码右击 打开git bash here 输入git init 之后自己的项目没有.git文件,有可能是因为.git文件隐藏了,下面是解决办法

利用AI让数据可视化

1. 从问卷星上下载一份答题结果。 序号用户ID提交答卷时间所用时间来源来源详情来自IP总分1、《中华人民共和国电子商务法》正式实施的时间是()。2、()可以判断企业在行业中所处的地位。3、()是指店铺内有…

解决qt中自定插件加载失败,不显示问题。

这个问题断断续续搞了一天多,主要是版本不匹配问题。 我们先来看下 Based on Qt 6.6.0 → 说明 Qt Creator 本身 是基于 Qt 6.6.0 框架构建的。MSVC 2019, 64-bit → 说明 Qt Creator 是使用 Microsoft Visual C 2019 编译器(64 位) 编译的。…

智慧社区3.0

项目介绍: 此项目旨在推动成都市探索**超大城市社区发展治理新路**,由三个实验室负责三大内容 1、**研发社区阵地空间管理模块**:AI算法实现态势感知(如通过社区图片和视频、文本,对环境 空间质量、绿视率、安全感分…

Springboot+Vue登录、注册功能(含验证码)(后端!)

我们首先写一个接口,叫login!然后对传入一个user,因为我们前端肯定是要传过来一个user,然后我们后端返回一个user,因为我们要根据这个去校验!我们还引入了一个hutool的一个东西,在pom文件里面引…

搞定python之八----操作mysql

本文是《搞定python》系列文章的第八篇,讲述利用python操作mysql数据库。相对来说,本文的综合性比较强,包含了操作数据库、异常处理、元组等内容,需要结合前面的知识点。 1、安装mysql模块 PyMySql模块相当于数据库的驱动&#…

LVGL 中设置 UI 层局部透明,显示下方视频层

LVGL层次 LVGL自上而下分别是layer_sys > layer_top > lv_sreen_active > layer_bottom 即 系统层、顶层、活动屏幕、底层 原理 如果将UI设置为局部透明,显示下方的视频层,不仅仅需要将当前活动屏幕的背景设置为透明,还需要将底层…

21.多态

一、多态概念 多种形态。 静态多态:编译时多态。(函数重载) 动态多态:运行时多态。(继承关系下,调用父类指针或引用,对于不同的对象有不同的行为) 二、多态的定义及实现 1&#xff…