【中工开发者】鸿蒙——沉浸式页面的开发

wx6750468446c7a

发布于 2024-12-7 17:42

浏览

0收藏

简介

本项目介绍了设置窗口全屏和扩展组件安全区域两种实现沉浸式效果的方式，并对状态栏、导航栏、挖空区域根据不同场景进行适配，为用户提供更优的视觉体验。

部分页面展示

【中工开发者】鸿蒙——沉浸式页面的开发-鸿蒙开发者社区

【中工开发者】鸿蒙——沉浸式页面的开发-鸿蒙开发者社区首页

【中工开发者】鸿蒙——沉浸式页面的开发-鸿蒙开发者社区商城页

【中工开发者】鸿蒙——沉浸式页面的开发-鸿蒙开发者社区游戏页

部分代码展示

import{ Shopping, ProductDetail, FaqList, ShoppingFullScreen }from'shopping';
import{ Route, ROUTES }from'../constants/Constants';
import{ VideoPlayer }from'./VideoPlayer';
import{ MiniGame }from'./MiniGame';
import{ MusicPlayer }from'./MusicPlayer';
@Entry
@Component
struct Index
@ProvidenavPageInfos: NavPathStack =newNavPathStack();
go(to:string|undefined) {
if(!to) {
return;
}
this.navPageInfos.pushPath({name: to });
}
@Builder
NavPageMap(name:string) {
if(name ==='Shopping') {
Shopping();
}elseif(name ==='ProductDetail') {
ProductDetail();
}elseif(name ==='FaqList') {
FaqList();
}elseif(name ==='VideoPlayer') {
VideoPlayer();
}elseif(name ==='MiniGame') {
MiniGame();
}elseif(name ==='MusicPlayer') {
MusicPlayer();
}elseif(name ==='ShoppingFullScreen') {
ShoppingFullScreen()
}
}
build() {
Navigation(this.navPageInfos) {
Column() {
Text($r('app.string.title'))
fontWeight(FontWeight.Bold)
fontSize(30)
fontColor('#E6000000')
width('100%')
height(140)
ForEach(ROUTES, (route: Route) =>
Text(route.title)
width('100%')
fontColor('#99000000')
fontSize(18)
Column() {
ForEach(route.children || [], (routeItem: Route, index) =>
if(index !==0) {
Divider()
color('#0D000000')
strokeWidth(0.5)
}
Row() {
Text(routeItem.title)
fontWeight(FontWeight.Medium)
Blank()
Image($r('app.media.arrow_right'))
width(24)
height(24)
}
width('100%')
padding({top:12,bottom:12})
onClick(() => this.go(routeItem.to))
(routerItem: Route) => JSON.stringify(routerItem))
}
width('100%')
backgroundColor(Color.White)
borderRadius(20)
margin({top:16,bottom:28})
padding({left:12,right:12})
(route: Route) => JSON.stringify(route))
}
width('100%')
height('100%')
backgroundColor('#F1F3F5')
padding(16)
}
hideToolBar(true)
hideTitleBar(true)
mode(NavigationMode.Stack)
navDestination(this.NavPageMap)
}
}

使用说明：

首页列出了沉浸式页面的实现方式和常见场景，点击对应的菜单项进入即可。
商城首页中点击某个商品进入商品详情页，点击详情页中常见问题区域进入商品常见问题页面，下滑到观察列表底部的避让情况。
避让挖孔的小游戏页面可通过切换不同挖孔位置的机型观察避让挖孔功能。

工程目录

├──commons
│  ├──commons/src/main/ets
│  │  └──utils	                    
│  │     └──Breakpoint.ets                 // 断点处理模块
│  └──commons/src/main/resources           // 应用静态资源目录
├──features
│  ├──shopping/src/main/ets
│  │  ├──constants
│  │  │  ├──Detail.ets                     // 商品详情页常量资源
│  │  │  ├──Home.ets                       // 商城首页常量资源
│  │  │  └──Index.ets                      // 商城入口页常量资源
│  │  ├──models
│  │  │  ├──Detail.ets                     // 商品详情页数据
│  │  │  ├──Home.ets                       // 商城首页数据
│  │  │  └──Index.ets                      // 商城入口页数据
│  │  └──views	                    
│  │     ├──detail
│  │     │  ├──Banner.ets                  // 商品详情页图片展示模块
│  │     │  ├──Discount.ets                // 商品详情页折扣模块
│  │     │  ├──Faq.ets                     // 商品详情页常见问题模块
│  │     │  ├──FaqList.ets                 // 常见问题列表页
│  │     │  ├──Footer.ets                  // 商品详情页底部按钮
│  │     │  ├──Index.ets                   // 商品详情页
│  │     │  ├──Information.ets             // 商品详情页详细信息模块
│  │     │  └──Toolbar.ets                 // 商品详情页顶部工具栏
│  │  	 ├──home
│  │     │  ├──Banner.ets                  // 商城首页图片展示模块
│  │     │  ├──Categories.ets              // 商城首页分类模块
│  │     │  ├──Header.ets                  // 商品首页头部标签栏和搜索栏
│  │     │  ├──Index.ets                   // 商城首页
│  │     │  ├──Recommend.ets               // 商城首页甄选推荐模块
│  │     │  └──Welfare.ets                 // 商城首页福利专区模块
│  │     └──Index.ets                      // 商城入口页面
│  └──shopping/src/main/resources          // 应用静态资源目录
└──products                  
   ├──entry/src/main/ets
   │  ├──constants
   │  │  └──Constants.ets                  // 常量资源
   │  ├──entryability
   │  │  └──EntryAbility.ets               // 程序入口类
   │  └──pages    
   │     ├──Index.ets                      // 主页面     
   │     ├──MiniGame.ets                   // 小游戏页面（避让挖孔场景） 
   │     ├──MusicPlayer.ets                // 音乐播放页面（深色背景状态栏适配场景） 
   │     └──VideoPlayer.ets                // 视频播放页面（隐藏状态栏和导航条场景）
   └──entry/src/main/resources             // 应用静态资源目录1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.