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

HarmonyOs鸿蒙开发实战(16)=＞沉浸式效果第一种方案一窗口全屏布局方案

article 2024/11/19 7:22:44

1.沉浸式效果的目的

开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。

2.窗口全屏布局方案介绍

调整布局系统为全屏布局，界面元素延伸到状态栏和导航条区域实现沉浸式效果。当不隐藏避让区时，可通过接口查询状态栏和导航条区域进行可交互元素避让处理，并设置状态栏或导航条的颜色等属性与界面元素匹配。当隐藏避让区时，通过对应接口设置全屏布局即可。

3. 窗口全屏布局方案一 => 不隐藏状态栏和导航条(不隐藏避让区)

可以通过调用窗口强制全屏布局接口setWindowLayoutFullScreen()实现界面元素延伸到状态栏和导航条；然后通过接口getWindowAvoidArea()获取并动态监听避让区域的变更信息，页面布局根据避让区域信息进行动态调整；设置状态栏或导航条的颜色等属性与界面元素进行匹配。

3.1.步骤一 =>调用setWindowLayoutFullScreen()接口设置窗口全屏。

3.2.步骤二 =>使用getWindowAvoidArea()接口获取当前布局遮挡区域（例如状态栏、导航条）

3.3.步骤三 =>注册监听函数，动态获取避让区域的实时数据。

示例代码：
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
// ...

onWindowStageCreate(windowStage: window.WindowStage): void {
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
return;
}

let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
console.info('Succeeded in setting the window layout to full-screen mode.');
}).catch((err: BusinessError) => {
console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
});

// 2. 获取布局避让遮挡的区域
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(type);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);

type = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
avoidArea = windowClass.getWindowAvoidArea(type);
let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
AppStorage.setOrCreate('topRectHeight', topRectHeight);

});
// 3. 注册监听函数，动态获取避让区域数据
windowClass.on('avoidAreaChange', (data) => {
if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
let topRectHeight = data.area.topRect.height;
AppStorage.setOrCreate('topRectHeight', topRectHeight);
} else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
let bottomRectHeight = data.area.bottomRect.height;
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
}
});
}
}

3.4.步骤四 =>布局中的UI元素需要避让状态栏和导航条，否则可能产生UI元素重叠等情况。

使用保存到本地的状态栏和导航栏高度信息，根据需要调整布局的top,bottom的padding值，达到沉浸式效果，代码及效果如下

示例代码：

@Entry
@Component
struct Index {
@StorageProp('bottomRectHeight')
bottomRectHeight: number = 0;
@StorageProp('topRectHeight')
topRectHeight: number = 0;

build() {
Row() {
Column() {
Row() {
Text('DEMO-ROW1').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)

Row() {
Text('DEMO-ROW2').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)

Row() {
Text('DEMO-ROW3').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)

Row() {
Text('DEMO-ROW4').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)

Row() {
Text('DEMO-ROW5').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)

Row() {
Text('DEMO-ROW6').fontSize(40)
}.backgroundColor(Color.Orange).padding(20)
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#008000')
// top数值与状态栏区域高度保持一致；bottom数值与导航条区域高度保持一致
.padding({ top: px2vp(this.topRectHeight), bottom: px2vp(this.bottomRectHeight) })
}
}
}

4.窗口全屏布局方案二 => 直接隐藏状态栏和导航条(隐藏避让区)，适用于游戏、电影等应用场景。可以通过从底部上滑唤出导航条。

4.1. 步骤1=>调用setWindowLayoutFullScreen()接口设置窗口全屏

4.2. 步骤2=>调用setSpecificSystemBarEnabled接口设置状态栏和导航条的具体显示/隐藏状态，此场景下将其设置为隐藏。

示例代码：
// 2. 设置状态栏隐藏
windowClass.setSpecificSystemBarEnabled('status', false).then(() => {
console.info('Succeeded in setting the status bar to be invisible.');
}).catch((err: BusinessError) => {
console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
});
// 2. 设置导航条隐藏
windowClass.setSpecificSystemBarEnabled('navigationIndicator', false).then(() => {
console.info('Succeeded in setting the navigation indicator to be invisible.');
}).catch((err: BusinessError) => {
console.error(`Failed to set the navigation indicator to be invisible. Code is ${err.code}, message is ${err.message}`);
});

5.实战项目及效果截图，背景色“#f1f1f1”,底部导航栏背景色白色，实战项目链接地址：HarmonyOs实战项目=＞App首页架构沉浸式效果-CSDN博客