1# 沉浸式界面开发 2 3## 场景说明 4沉浸式界面通常是指全屏显示，即当前画面占据整个屏幕。画面放大的同时，让用户摆脱无关信息的干扰，带给用户沉浸式的体验。常见的场景有：视频播放、游戏等。本例即为大家介绍如何开发沉浸式界面。 5 6## 效果呈现 7本例中的沉浸式界面有三种实现方式，对应效果如下： 8 9| 方案一：颜色背景铺满 | 方案二：图片背景铺满 | 方案三：背景铺满的同时、状态栏不可见 | 10| ----------------------------------- | --------------------------------------------- | ------------------------------------- | 11|  |  |  | 12 13 14## 运行环境 15本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发： 16 17- IDE: DevEco Studio 3.1 Beta2 18- SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release) 19 20## 实现思路 21如果一个应用想要获得沉浸式的体验，开发者可以通过以下三种方式进行实现： 22 23- 颜色背景通铺：使应用页面的背景色和状态栏、导航栏的背景色一致。可通过setWindowSystemBarProperties进行设置。 24- 图片背景通铺：将状态栏、导航栏的背景色设置为透明以便呈现应用界面的背景，同时通过 windowClass.on接口获取到状态栏、导航栏的区域信息，进行规避处理，以免状态栏、导航栏的内容遮挡住应用内容。 25- 隐藏导航栏和状态栏：使用setWindowSystemBarEnable设置导航栏和状态栏为隐藏状态。 26 27>  **说明：** 28> 沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里，此时刚好可以获取窗口的信息，放在页面页面生命周期里会出现窗口大小不一致，影响体验。 29 30下文将分别介绍这三种方案的具体开发步骤。 31 32 33## 开发步骤 34### 颜色背景通铺 35此方案通过调用setWindowSystemBarProperties接口将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色，以达到界面全屏的效果。 36 37具体代码如下： 38 39```ts 40import window from '@ohos.window'; 41import common from '@ohos.app.ability.common'; 42 43@Entry 44@Component 45struct Type2 { 46 @State message: string = 'Hello World' 47 // 获取UIAbility上下文 48 context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext 49 async setSystemBar() { 50 // 获取当前应用窗口 51 let windowClass:window.Window = await window.getLastWindow(context) 52 // 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色 53 await windowClass.setWindowSystemBarProperties({ 54 navigationBarColor: "#00FF00", 55 statusBarColor: "#00FF00", 56 navigationBarContentColor: "#00FF00", 57 statusBarContentColor: "#00FF00" 58 }) 59 } 60 61 aboutToAppear() { 62 this.setSystemBar() 63 } 64 65 build() { 66 Row() { 67 Column() { 68 Text(this.message) 69 .fontSize(50) 70 .fontWeight(FontWeight.Bold) 71 } 72 .width('100%') 73 } 74 .height('100%') 75 } 76} 77``` 78此方案的优势在于不需要处理应用窗口和状态栏、导航栏窗口的遮挡关系，因为此方案没有使用setWindowLayoutFullScreen 接口设置沉浸式布局，所以三个窗口是平铺的，不会重叠。劣势在于无法将应用的背景图等信息延伸到状态栏、导航栏窗口中。适用于扁平化设计风格的应用。 79 80### 图片背景通铺 81这种方案可以实现图片背景的通铺，同时又能避免状态栏和导航栏的内容跟应用内容相互遮挡，导致显示效果异常。 82为了能让应用的有效显示范围避开系统的状态栏和导航栏，以免内容重叠，我们可以通过windowClass.on(type: ‘avoidAreaChange’, callback: Callback<{AvoidAreaType, AvoidArea}>) 获取系统规避区域的大小，并对这一块区域做出相应的规避。 83其中回调参数AvoidArea是规避区域，可以通过其获取规避区域的具体范围；AvoidAreaType是规避区域的类型其取值如下，示例中需要规避的状态栏和导航栏属于TYPE_SYSTEM类型。 84 85| 名称 | 值 | 说明 | 86| -------------------- | ---- | ----------------- | 87| TYPE_SYSTEM | 0 | 表示系统默认区域。 | 88| TYPE_CUTOUT | 1 | 表示刘海屏区域。 | 89| TYPE_SYSTEM_GESTURE9+ | 2 | 表示手势区域。 | 90| TYPE_KEYBOARD9+ | 3 | 表示软键盘区域 | 91具体代码如下： 92 93**page代码** 94 95```ts 96// index.ets 97@Entry 98@Component 99struct Type3 { 100 @State message: string = 'Hello World' 101 @StorageLink("topHeight") topHeight: number = 0 102 @StorageLink("bottomHeight") bottomHeight: number = 0 103 104 build() { 105 Column() { 106 // 在界面顶部放置一个Row组件，用于占位 107 Row() { 108 109 } 110 .width("100%") 111 // 设置Row组件的高度为状态栏的高度，可避免界面内容与状态栏内容重叠 112 .height(px2vp(this.topHeight)) 113 Row() { 114 Text(this.message) 115 .fontSize(50) 116 .fontWeight(FontWeight.Bold) 117 .position({ x: 0, y: 0 }) 118 } 119 .width("100%") 120 .flexGrow(1) 121 // 在界面底部放置一个Row组件，用于占位 122 Row() { 123 124 } 125 .width("100%") 126 // 设置Row组件的高度为导航栏的高度，可避免界面内容与导航栏内容重叠 127 .height(px2vp(this.bottomHeight)) 128 } 129 .backgroundImage($r("app.media.icon")) 130 .backgroundImageSize(ImageSize.Cover) 131 .width("100%") 132 .height("100%") 133 } 134} 135``` 136**ability代码** 137```ts 138// MainAbility.ts 139import window from '@ohos.window'; 140 141async function enterImmersion(windowClass: window.Window) { 142 // 获取状态栏和导航栏的高度 143 windowClass.on("avoidAreaChange", ({ type, area }) => { 144 if (type == window.AvoidAreaType.TYPE_SYSTEM) { 145 // 将状态栏和导航栏的高度保存在AppStorage中 146 AppStorage.SetOrCreate<number>("topHeight", area.topRect.height); 147 AppStorage.SetOrCreate<number>("bottomHeight", area.bottomRect.height); 148 } 149 }) 150 // 设置窗口布局为沉浸式布局 151 await windowClass.setWindowLayoutFullScreen(true) 152 await windowClass.setWindowSystemBarEnable(["status", "navigation"]) 153 // 设置状态栏和导航栏的背景为透明 154 await windowClass.setWindowSystemBarProperties({ 155 navigationBarColor: "#00000000", 156 statusBarColor: "#00000000", 157 navigationBarContentColor: "#FF0000", 158 statusBarContentColor: "#FF0000" 159 }) 160} 161 162export default class MainAbility extends Ability { 163 ... 164 async onWindowStageCreate(windowStage: window.WindowStage) { 165 let windowClass:window.Window = await windowStage.getMainWindow() 166 await enterImmersion(windowClass) 167 windowStage.loadContent('pages/page5') 168 } 169 ... 170} 171``` 172### 隐藏状态栏、导航栏 173隐藏状态栏、导航栏可以达到完全沉浸的效果，使用setWindowSystemBarEnable接口即可实现。 174 175具体代码如下： 176 177```ts 178import window from '@ohos.window'; 179import common from '@ohos.app.ability.common'; 180 181@Entry 182@Component 183struct Type3 { 184 @State message: string = 'Hello World' 185 context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext 186 async setSystemBar() { 187 let windowClass = await window.getLastWindow(context) 188 //设置导航栏，状态栏不可见 189 await windowClass.setWindowSystemBarEnable([]) 190 } 191 192 aboutToAppear() { 193 this.setSystemBar() 194 } 195 196 build() { 197 Row() { 198 Column() { 199 Text(this.message) 200 .fontSize(50) 201 .fontWeight(FontWeight.Bold) 202 } 203 .width('100%') 204 } 205 .backgroundColor("#ffee33") 206 .height('100%') 207 } 208} 209``` 210 211## 参考 212[窗口](../application-dev/reference/apis-as/js-apis-window.md)
