鸿蒙应用示例：如何解决DevEco预览器上下白色间距问题及实现全屏沉浸式体验...

随着鸿蒙系统的不断更新迭代，新版DevEco Studio的预览器会有上下白色间距问题

我们可以通过调用鸿蒙的API来修复这个问题。以下是如何手动调整界面以消除这些空白区域的方法：

登录后复制

this.windowClass.setWindowLayoutFullScreen(true)

• 1.

这段代码会在页面加载时获取最后一个窗口并将其设为全屏模式，从而消除上下白色间距。

实现全屏(沉浸式)页面与非全屏(非沉浸式)页面之间的跳转与切换

为了实现全屏(沉浸式)页面与非全屏(非沉浸式)页面之间的无缝切换，我们可以使用鸿蒙的 ArkUI 库。以下是一个示例，展示了如何在两个页面之间进行切换，并保持全屏状态：

全屏页面示例(Page01.ets) 

登录后复制

import { router, window } from '@kit.ArkUI';
 
@Entry
@Component
struct 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)
  }
}

• 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.

非全屏页面示例(Page02.ets)

登录后复制

import { router } from '@kit.ArkUI'
@Entry
@Component
struct Page65 {
  build() {
    Column() {
      Text('当前页非全屏(非沉浸式)').fontSize(30)
      Button('返回上一页').onClick(() => {
        router.back()
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Blue)
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

在这个例子中，我们定义了两个页面：一个是全屏页面(Page01)，另一个是非全屏页面(Page02)。当用户点击“跳转到下一页”按钮时，页面会从全屏页面跳转到非全屏页面；而点击“返回上一页”按钮时，页面又会回到全屏页面。这样实现了全屏与非全屏页面之间的自由切换。注意，在全屏页面中，我们使用了 setFullScreen(true) 方法来开启全屏模式，而在非全屏页面中并没有设置全屏模式。这样就可以实现页面间的正常切换。

结论

通过上述方法，您可以轻松地解决DevEco预览器中的上下白色间距问题，并实现全屏沉浸式页面与非全屏页面之间的切换。鸿蒙系统提供了丰富的工具和库供开发者使用，帮助他们更好地控制应用程序的外观和行为。希望这篇文章能对您的鸿蒙系统开发工作有所帮助！