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

大学生网站建设申报书网站建设义乌

news 2025/11/5 23:23:35

大学生网站建设申报书,网站建设义乌,关键词排名工具,上海千家美装饰公司地址创建项目： 项目需求：要实现的页面效果使用相对布局（Relative）： 所需图片资源需要请点击我https://download.csdn.net/download/m0_73992525/90009094?spm1001.2014.3001.5503 修改默认启动页面此时应用启动默认加载…

创建项目：

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

使用相对布局（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')}
}