如何进行手机的系统安全区域(safe area)适配?

如何进行手机的系统安全区域(safe area)适配,对于 Web 适配安全区,WebView 内是否有支持的统一环境变量给 H5 获取,还是需要依赖Native注入?


HarmonyOS
2024-11-06 09:00:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

​应用在默认情况下窗口背景绘制范围是全屏,但UI元素被限制在安全区内(自动排除状态栏和导航条)进行布局,来避免界面元素被状态栏和导航条遮盖。可以设置沉浸式布局通过setWindowBackgroundColor()方法让全屏颜色一致,具体参考链接为:​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202081847174413

可以通过getLastWindow获取当前应用内最上层的子窗口,若无应用子窗口,则返回应用主窗口只实现某个页面的全屏,可以在aboutToapear设置全屏,在aboutToDisApear设置恢复,参考链接为:​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202484117114

具体参考代码如下:​

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
import { window } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct WebComponent { 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
 
  setBarBarProperties(isFullScreen: boolean) { 
    window.getLastWindow(getContext(this)).then((windowClass) => { 
      let isLayoutFullScreen = isFullScreen; 
      windowClass.setWindowLayoutFullScreen(isFullScreen, (err) => { 
        if (err.code) { 
          console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); 
          return; 
        } 
        console.info('Succeeded in setting the window layout to full-screen mode.'); 
      }); 
      let names: Array<'status' | 'navigation'> = isFullScreen ? [] : ['status', 'navigation']; 
      windowClass.setWindowSystemBarEnable(names, (err) => { 
        if (err.code) { 
          console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); 
          return; 
        } 
        console.info('Succeeded in setting the system bar to be visible.'); 
      }); 
    }) 
  } 
 
 
  aboutToAppear(): void { 
    this.setBarBarProperties(true); 
  } 
 
  aboutToDisappear() { 
    this.setBarBarProperties(false); 
  } 
 
  build() { 
    Column() { 
 
      // 组件创建时,加载www.example.com 
      Web({ src: $rawfile("index1.html"), controller: this.webviewController}) 
        .backgroundColor(Color.Orange) 
        .height("100%") 
 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-11-06 15:52:56
相关问题
HarmonyOS 安全区域问题
32浏览 • 1回复 待解决
HarmonyOS scroll安全区域问题
32浏览 • 1回复 待解决
关于屏幕安全区域问题咨询
329浏览 • 1回复 待解决
Flutter 项目在设备安全区如何适配
205浏览 • 1回复 待解决