添加一个基于ccc 3.1的button代码创建方式

ButtonDemo/.gitignore

@@ -0,0 +1,24 @@
+
+#///////////////////////////
+# Cocos Creator 3D Project
+#///////////////////////////
+library/
+temp/
+local/
+build/
+profiles/
+native
+#//////////////////////////
+# NPM
+#//////////////////////////
+node_modules/
+
+#//////////////////////////
+# VSCode
+#//////////////////////////
+.vscode/
+
+#//////////////////////////
+# WebStorm
+#//////////////////////////
+.idea/

ButtonDemo/assets/scenes.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3b99d03a-13c2-4098-bcbb-07ba558cc36d",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

ButtonDemo/assets/scenes/scene.scene.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.27",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "a7cfb650-4de4-4ab2-aa56-6f7cdc46e809",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}

ButtonDemo/assets/scripts.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "abf4fb75-3db7-4a2d-b08b-6ddfda0d8680",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

ButtonDemo/assets/scripts/ButtonUtil.ts

@@ -0,0 +1,59 @@
+import { Button, Component, EventHandler, Node } from "cc";
+
+/**
+ * 对button操作的简单封装
+ * 版本为ccc 3.1.x
+ */
+export default class ButtonUtil {
+
+    /**
+     * 
+     * @param button 组件
+     * @param node 事件所在脚本的节点
+     * @param component 事件所在脚本
+     * @param callback 事件名字
+     * @param customData 数据
+     */
+    public static AddClick(button: Button, node: Node, component: string, callback: string, customData?: any) {
+        let clickEventHandler = new EventHandler();
+        clickEventHandler.target = node;
+        clickEventHandler.component = component;
+        clickEventHandler.handler = callback;
+        clickEventHandler.customEventData = customData || null;
+
+        button.clickEvents.push(clickEventHandler);
+
+    }
+
+    /**
+     * 
+     * @param node 添加组件的节点
+     * @param zoomScale 绽放因子 默认0.95
+     * @returns 
+     */
+    public static AddScaleButton(node: Node, zoomScale: number = 0.95): Button {
+        let button = node.addComponent(Button);
+        button.target = node;
+        button.transition = Button.Transition.COLOR;
+        button.duration = 0.1;
+        button.zoomScale = zoomScale;
+        return button;
+    }
+
+    /**
+     * 
+     * @param button 组件
+     * @param state 是否禁用状态 默认为false
+     */
+    public static Interactable(button: Button | Node, state: boolean) {
+        if (button instanceof Button) {
+            button.interactable = state;
+        } else if (button instanceof Node) {
+            button = button.getComponent(Button)!;
+            button && (button.interactable = state);
+        }
+    }
+
+
+
+}

ButtonDemo/assets/scripts/ButtonUtil.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "1cdee820-8f9e-41d0-8f2e-6b2496c4ec1d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

ButtonDemo/assets/scripts/Scene.ts

@@ -0,0 +1,53 @@
+
+import { _decorator, Component, Node, Label, Button, EventTouch } from 'cc';
+import ButtonUtil from './ButtonUtil';
+const { ccclass, property } = _decorator;
+
+@ccclass('Scene')
+export class Scene extends Component {
+
+    @property(Label)
+    txt: Label = null!;
+
+    @property(Node)
+    btn2: Node = null!;
+
+    @property(Button)
+    btn1: Button = null!;
+
+    onLoad() {
+        //手动添加button组件跟事件
+        let btn = ButtonUtil.AddScaleButton(this.btn2);
+        ButtonUtil.AddClick(btn, this.node, 'Scene', 'onClick_2');
+        console.log('this.btn1',this.btn1);
+    }
+
+    start() {
+        // [3]
+    }
+
+    onClick_1(event: EventTouch) {
+        console.log('event 1', event);
+        this.txt.string = 'button 1'
+    }
+
+    onClick_2(event: EventTouch) {
+        console.log('event 2', event);
+        this.txt.string = 'button 2';
+    }
+
+    // update (deltaTime: number) {
+    //     // [4]
+    // }
+}
+
+/**
+ * [1] Class member could be defined like this.
+ * [2] Use `property` decorator if your want the member to be serializable.
+ * [3] Your initialization goes here.
+ * [4] Your update function goes here.
+ *
+ * Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
+ * Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
+ * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
+ */

ButtonDemo/assets/scripts/Scene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a59f9f2d-05dc-4994-922f-d9b4d0f4370b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

ButtonDemo/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ButtonDemo",
+  "type": "3d",
+  "uuid": "3d032722-33df-4bb3-bdfb-b61a9bfc4301",
+  "version": "3.1.1"
+}

ButtonDemo/settings/v2/packages/builder.json

@@ -0,0 +1,3 @@
+{
+  "__version__": "1.2.8"
+}

ButtonDemo/settings/v2/packages/device.json

@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.1"
+}

ButtonDemo/settings/v2/packages/engine.json

@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.5"
+}

ButtonDemo/settings/v2/packages/program.json

@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.0"
+}

ButtonDemo/settings/v2/packages/project.json

@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.1"
+}

ButtonDemo/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  /* Base configuration. Do not edit this field. */
+  "extends": "./temp/tsconfig.cocos.json" 
+
+  /* Add your custom configuration here. */
+}

CreatorUtils/UI/ButtonUtil.ts

@@ -0,0 +1,59 @@
+import { Button, Component, EventHandler, Node } from "cc";
+
+/**
+ * 对button操作的简单封装
+ * 版本为ccc 3.1.x
+ */
+export default class ButtonUtil {
+
+    /**
+     * 
+     * @param button 组件
+     * @param node 事件所在脚本的节点
+     * @param component 事件所在脚本
+     * @param callback 事件名字
+     * @param customData 数据
+     */
+    public static AddClick(button: Button, node: Node, component: string, callback: string, customData?: any) {
+        let clickEventHandler = new EventHandler();
+        clickEventHandler.target = node;
+        clickEventHandler.component = component;
+        clickEventHandler.handler = callback;
+        clickEventHandler.customEventData = customData || null;
+
+        button.clickEvents.push(clickEventHandler);
+
+    }
+
+    /**
+     * 
+     * @param node 添加组件的节点
+     * @param zoomScale 绽放因子 默认0.95
+     * @returns 
+     */
+    public static AddScaleButton(node: Node, zoomScale: number = 0.95): Button {
+        let button = node.addComponent(Button);
+        button.target = node;
+        button.transition = Button.Transition.COLOR;
+        button.duration = 0.1;
+        button.zoomScale = zoomScale;
+        return button;
+    }
+
+    /**
+     * 
+     * @param button 组件
+     * @param state 是否禁用状态 默认为false
+     */
+    public static Interactable(button: Button | Node, state: boolean) {
+        if (button instanceof Button) {
+            button.interactable = state;
+        } else if (button instanceof Node) {
+            button = button.getComponent(Button)!;
+            button && (button.interactable = state);
+        }
+    }
+
+
+
+}