safeArea组件导致对齐出错

Creator 3.x
#1

  • Creator 版本： 3.8.2

  • 目标平台： chrome浏览器预览

  • 重现方式：

设计分辨率640x1386，创建一个Node，子节点放左对齐和右对齐的颜色块。设置适配宽度和适配高度，此时resolutionPolicy是showAll，creator点击运行在浏览器预览，预览设置iPad分辨率，左右显示黑边，两个颜色块位置正常

image
image3382×1814 849 KB

之后给Node添加SafeArea，两个颜色块会跑到黑边的区域

image
image3328×1742 752 KB

排查到是获取的安全区域比visibleSize还要大，但根据源码的注释

如果不是异形屏将默认返回一个和 visibleSize 一样大的 Rect

因此猜测是bug
请问应该如何解决？

#2

demo：
creator382demo.zip (31.5 KB)

#3

没有问题的,按照你这个截图来说 只是你白色背景没有添加widget因此没有铺满而已。

#4

可是背景不希望铺满，允许有黑边 :eyes:

#5

希望达到的效果就是第一张图那样，但又同时想用SafeArea组件来防止一些节点被刘海遮挡

#6

在canvas节点上挂上脚本：

import * as cc from "cc"

import { view } from "cc";

import { ResolutionPolicy } from "cc";

import { Size } from "cc";

const { ccclass, property } = cc._decorator;

@ccclass

export default class CanvasFix extends cc.Component {

    onLoad() {

        let size: Size = view.getVisibleSize();

        let designSize = view.getDesignResolutionSize();

     

        // 方形的时候的适配方式

        if( size.width / size.height > designSize.width/ designSize.height  ) {

            view.setResolutionPolicy( ResolutionPolicy.SHOW_ALL );

            view.setDesignResolutionSize(designSize.width, designSize.height, ResolutionPolicy.SHOW_ALL);
        }
        else if( size.width / size.height > designSize.width/ designSize.height ) {
            view.setResolutionPolicy(ResolutionPolicy.FIXED_HEIGHT);
        }
    }
}

在其他任意任意脚本之外写上：

// @ts-ignore
cc.sys._getSafeAreaRect = cc.sys.getSafeAreaRect;

// @ts-ignore
cc.sys.getSafeAreaRect =  (): Rect => {

    // @ts-ignore
    const safeArea = cc.sys._getSafeAreaRect();

   

    const visibleSize = cc.view.getVisibleSize();

    if( safeArea.width > visibleSize.width ){

        safeArea.width = visibleSize.width;

        safeArea.x = 0;

    }

    return safeArea;

}
#7

感谢~按照第二段代码重新getSafeAreaRect就正常了~
请问第一个组件的作用是什么？我看两个判断语句是一样的。应该直接设置SHOW_ALL也可以吧