随着鸿蒙系统的不断更新迭代，新版 DevEco Studio 的预览器会有上下白色间距问题
我们可以通过调用鸿蒙的 API 来修复这个问题。以下是如何手动调整界面以消除这些空白区域的方法：
this.windowClass.setWindowLayoutFullScreen(true)
复制代码
这段代码会在页面加载时获取最后一个窗口并将其设为全屏模式，从而消除上下白色间距。
实现全屏（沉浸式）页面与非全屏（非沉浸式）页面之间的跳转与切换
为了实现全屏（沉浸式）页面与非全屏（非沉浸式）页面之间的无缝切换，我们可以使用鸿蒙的 ArkUI 库。以下是一个示例，展示了如何在两个页面之间进行切换，并保持全屏状态：
全屏页面示例（Page01.ets）
import { router, window } from '@kit.ArkUI';
@Entry@Componentstruct Page01 { windowClass?: window.Window
async setFullScreen(flag: boolean) { if (!this.windowClass) { this.windowClass = await window.getLastWindow(getContext(this)) } this.windowClass.setWindowLayoutFullScreen(flag) }
onPageShow(): void { this.setFullScreen(true) }
onPageHide(): void { this.setFullScreen(false) }
build() { Column() { Text('当前页全屏（沉浸式）').fontSize(30) Button('跳转到下一页').onClick(() => { router.pushUrl({ url: 'pages/Page02' }) }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) .backgroundColor(Color.Orange) }}
复制代码
非全屏页面示例（Page02.ets）
import { router } from '@kit.ArkUI'@Entry@Componentstruct Page65 { build() { Column() { Text('当前页非全屏（非沉浸式）').fontSize(30) Button('返回上一页').onClick(() => { router.back() }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) .backgroundColor(Color.Blue) }}
复制代码
在这个例子中，我们定义了两个页面：一个是全屏页面（Page01），另一个是非全屏页面（Page02）。当用户点击“跳转到下一页”按钮时，页面会从全屏页面跳转到非全屏页面；而点击“返回上一页”按钮时，页面又会回到全屏页面。这样实现了全屏与非全屏页面之间的自由切换。注意，在全屏页面中，我们使用了 setFullScreen(true) 方法来开启全屏模式，而在非全屏页面中并没有设置全屏模式。这样就可以实现页面间的正常切换。
结论
通过上述方法，您可以轻松地解决 DevEco 预览器中的上下白色间距问题，并实现全屏沉浸式页面与非全屏页面之间的切换。鸿蒙系统提供了丰富的工具和库供开发者使用，帮助他们更好地控制应用程序的外观和行为。希望这篇文章能对您的鸿蒙系统开发工作有所帮助！
评论