Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题

正常项目中使用Widget组件将节点固定到某个位置(左下角)时会出现下面这种情况:

按钮并没有对齐到左下角,这是因为canvas被设置为设计大小了,而不是实际大小。

fit width和fit height同时勾选的时候,需要将Canvas或者UI的父节点设置成真正的全屏

typescript 复制代码
import { _decorator, Component, Node, screen, UITransform, view, Widget } from "cc";
const { ccclass, property } = _decorator;

@ccclass("Adapter")
export class Adapter extends Component {
    start() {
        const { width, height } = screen.windowSize;
        const screenWidth = width / view.getScaleX();
        const screenHeight = height / view.getScaleY();
        this.node.parent.getComponent(UITransform).setContentSize(screenWidth, screenHeight);
        // console.log("调整UI", view.getScaleX(), view.getScaleY(), screenWidth, screenHeight);
        //添加Widget适配
        let widget = this.node.getComponent(Widget);
        if (!widget) {
            widget = this.node.addComponent(Widget);
        }
        widget.left = 30; //留点距离给按钮的动画
        widget.bottom = 25;
    }

    update(deltaTime: number) {}
}

//screenWidth和screenHeight就是游戏内全屏的分辨率,将父节点设为这个大小之后,子节点的widget应该也能根据全屏进行适配了。

DownLoad节点的Widget组件就可以生效了

无论是横屏还是竖屏Widget组件都可以生效了

相关推荐
Predestination王瀞潞2 分钟前
JDK安装及环境变量配置
java·linux·开发语言
lsx2024067 分钟前
Python break 语句详解
开发语言
hmbbcsm8 分钟前
python做题小记(八)
开发语言·c++·算法
wyzqhhhh32 分钟前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL32 分钟前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
雷中听风35 分钟前
使用字节的源安装rust
开发语言·后端·rust
想学后端的前端工程师43 分钟前
【Java集合框架深度解析:从入门到精通-后端技术栈】
前端·javascript·vue.js
特立独行的猫a1 小时前
C++开发中的Pimpl机制与类声明机制深度解析:现代C++的编译解耦艺术
开发语言·c++·pimpl
GoWjw1 小时前
在C&C++指针的惯用方法
c语言·开发语言·c++
heartbeat..1 小时前
JUC 在实际业务场景的落地实践
java·开发语言·网络·集合·并发