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组件都可以生效了

相关推荐
小菜全23 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
人衣aoa23 分钟前
Python编程基础(八) | 类
开发语言·python
晚云与城31 分钟前
今日分享:C++ Stack和queue(栈与队列)
开发语言·c++
白水清风34 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy36 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小莞尔37 分钟前
【51单片机】【protues仿真】基于51单片机停车场的车位管理系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
张烫麻辣亮。37 分钟前
golang-gin包
开发语言·golang·gin
yuluo_YX44 分钟前
Go Style 代码风格规范
开发语言·后端·golang
百锦再1 小时前
脚本语言的大浪淘沙或百花争艳
java·开发语言·人工智能·python·django·virtualenv·pygame
车口1 小时前
滚动加载更多内容的通用解决方案
javascript