背景：

每次想添加背景、sprite、node-touch的时候，总会临时的需要设置 上下左右的widget距离。

点击四个属性，每个属性设置数值。需要操作四次点击，移动鼠标三次，输入数值4次。------想偷懒，不想输入，想自动生成。

整理了三种实现的方式。
https://mp.weixin.qq.com/s?__biz=MzI5MjY0NzU4MA==&mid=2247484295&idx=1&sn=993f6ce073bc41eed49b2908e8c79fbf&chksm=ec7f6474db08ed624f013f67790a3ae147cafb714614f224a0271e209f5576a3b6a0b3e62906&token=2135799154&lang=zh_CN#rd

cocoscreator246 自定义引擎【2】-设置拖拽widget的时候自动打开四个边距，并且设置为0；

image720×244 21.5 KB

1. 第一种实现方案，比较传统，设置prefab，独立组件。
   
   

   image1031×986 154 KB
   
   方式二：自定义引擎
   
   

   2555×513 973 KB
   
   编辑ccWidget，添加function
   resetInEditor: CC_EDITOR && function () {
   Editor.log(‘resetInEditor’);
   this.isAlignTop = true;
   this.isAlignBottom = true;
   this.isAlignLeft = true;
   this.isAlignRight = true;
   this.left = 0;
   this.right = 0;
   this.top = 0;
   this.bottom = 0;
   },
   方式三：node下挂载自定义的widget脚本

• 新建ts类widgetEx.ts
  
  

  31110×1026 2.12 MB

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

private _fullFlag: boolean = false;

@property
get fullFlag() {
    return this._fullFlag;
}

set fullFlag(value) {
    if (CC_EDITOR) {
        Editor.log('editor')  
        let widgetS = this.node.getComponent(cc.Widget);
        widgetS.isAlignTop = true;
        widgetS.isAlignBottom = true;
        widgetS.isAlignLeft = true;
        widgetS.isAlignRight = true;
        this.node.getComponent(cc.Widget).left = 0;
        this.node.getComponent(cc.Widget).right = 0;
        this.node.getComponent(cc.Widget).top = 0;
        this.node.getComponent(cc.Widget).bottom = 0;
    }
    this._fullFlag = value;
}
onLoad() {

}

start() {

}

// update (dt) {}

}

说个第四种，扩展 inspector 加个按钮，一键对齐target 节点