HarmonyOS 鸿蒙Next中Popup气泡

HarmonyOS 鸿蒙Next中Popup气泡 Popup气泡如何延伸到安全区域

3 回复

【问题描述】 如何使Popup气泡组件延伸安全区域。

【背景知识】 全屏窗口UI元素包括状态栏、界面和底部导航条，安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内，通过调整状态栏、应用界面和导航条的显示效果来实现组件延伸状态栏导航条等系统界面延伸安全区域。

【解决方案】 根据要求使用全屏布局使页面元素延伸到状态栏，通过如下对应接口设置全屏布局实现Popup气泡延伸安全区域。

代码示例如下：

import { Popup,PopupTextOptions,PopupIconOptions, window } from '@kit.ArkUI';
@Entry
@Component
struct PopupPage {
  onPageShow(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(true)
    })
  }
  onPageHide(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(false)
    })
  }
  build() {
    Column(){
      Popup({
        icon: {
          // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
          image: $r('app.media.startIcon'),
          width: 32,
          height: 32,
          fillColor: Color.White,
          borderRadius: 16
        } as PopupIconOptions,
        title: {
          text: 'This is a popup',
          fontSize: 20,
          fontColor: Color.Black,
          fontWeight: FontWeight.Normal
        } as PopupTextOptions,
        message: {
          text: 'This is the message',
          fontSize: 15,
          fontColor: Color.Black
        } as PopupTextOptions
      })
    }
    .width("100%")
    .height("100%")
  }
}

更多关于HarmonyOS 鸿蒙Next中Popup气泡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next的Popup气泡组件

Popup气泡组件用于创建临时悬浮层，支持自定义位置、内容和样式。通过@Entry和@Component声明式UI构建，可绑定触发条件（如点击事件）。属性包括placement（定位方向）、arrow（是否显示箭头）和自定义内容区域。支持动态响应状态变化，如使用@State控制显示/隐藏。

在HarmonyOS Next中，Popup组件默认不会自动延伸到安全区域（如刘海屏或状态栏区域）。如果需要实现此效果，可以通过以下方式手动调整：

  1. 使用setWindowLayout方法，结合WindowManager.LayoutConfig来设置Popup窗口的尺寸和位置，确保覆盖安全区域。
  2. 获取安全区域插入（insets）信息，通过getWindowSystemInsetsAPI获取状态栏、导航栏等的高度，并在布局时进行偏移计算。
  3. 在Popup的布局文件中，设置fitsSystemWindows="true"属性，但需注意此属性可能不会完全覆盖安全区域，需结合代码调整。

示例代码片段（ArkTS）：

import window from '@ohos.window';

// 获取窗口并调整Popup布局
let windowClass = await window.getLastWindow(this.context);
let insets = await windowClass.getWindowSystemInsets();
let safeAreaTop = insets.top; // 状态栏高度

// 设置Popup窗口布局，扩展至安全区域
popupWindow.setWindowLayout(
  { width: '100%', height: '100%' },
  { x: 0, y: -safeAreaTop } // 向上偏移以覆盖顶部安全区域
);

注意：具体实现需根据实际UI设计和设备差异进行适配。

回到顶部