鸿蒙应用实例：如何解决 DevEco 预览器顶部和底部白色间距问题并实现全屏沉浸式体验

最编程 2024-10-01 20:53:41

...

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

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

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

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

this.windowClass.setWindowLayoutFullScreen(true)

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

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

为了实现全屏（沉浸式）页面与非全屏（非沉浸式）页面之间的无缝切换，我们可以使用鸿蒙的 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)
  }
}

非全屏页面示例（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)
  }
}

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

结论

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

上一篇：处理 postgresql 僵尸进程的想法

下一篇： Python 库之一 pandas