CocosCreator3.8研究笔记（十九）CocosCreator UI组件（三）

前面的文章已经介绍了Layout 组件 、ScrollView 组件 、PageView 组件 。

想了解的朋友，请查看 CocosCreator3.8研究笔记（十八）CocosCreator UI组件（二）。

今天我们主要介绍CocosCreator 常用组件：Button 组件 、EditBox 组件 、ProgressBar 组件、Toggle 组件。

一、Button 组件

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化，在完成点击操作后响应一个自定义的行为。

（1）、Button 属性

属性	功能说明
Target	Node 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。
Interactable	布尔类型，设为 false 时，则 Button 组件进入禁用状态。
Transition	枚举类型，包括 NONE、COLOR、SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。
Click Event	列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。

• Button Transition

Button Transition 用来指定当用户点击 Button 时的状态表现，目前主要有 NONE、COLOR、SPRITE 和 SCALE。

• COLOR Transition

• SPRITE Transition

• SCALE Transition

属性	功能
Duration	Button 状态切换需要的时间间隔。
ZoomScale	当用户点击按钮后，按钮会缩放到一个值，这个值等于 Button 原始 scale * zoomScale，zoomScale 可以为负数

（2）、Button 事件

属性	功能说明
Target	带有脚本组件的节点。
Component	脚本组件名称。
Handler	指定一个回调函数，当用户点击 Button 并释放时会触发此函数。
CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

代码添加回调的两种方式：

• 构造一个 EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    onLoad () {
        const clickEventHandler = new EventHandler();
        clickEventHandler.target = this.node;  // 这个 node 节点是你的事件处理代码组件所属的节点
        clickEventHandler.component = 'test';  // 这个是脚本类名
        clickEventHandler.handler = 'callback';
        clickEventHandler.customEventData = 'data';
        const button = this.node.getComponent(Button);
        button.clickEvents.push(clickEventHandler);
    }

    callback (event: Event, customEventData: string) {
        // 这里 event 是一个 Touch Event 对象，可以通过 event.target 取到事件的发送节点
        const node = event.target as Node;
        const button = node.getComponent(Button);
        console.log(customEventData); // data
    }
}

• 通过 button.node.on('click', ...) 的方式来添加

import { _decorator, Component, Button } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("test")
export class test extends Component {
    @property(Button)
    button: Button | null = null;
    onLoad () {
        this.button.node.on(Button.EventType.CLICK, this.callback, this);
    }

    callback (button: Button) {
       
    }
}

注意:

(A)、在事件回调里面无法获得当前点击按钮的屏幕坐标点 。

(B)、这种方式注册的事件，无法传递 customEventData。

二、 EditBox 组件

EditBox 是一种文本输入组件，可以获取用户输入的文本。

（1）、EditBox 属性

属性	功能说明
BackgroundImage	输入框背景节点上挂载的 Sprite 组件对象
FontColor	输入框文本的颜色
FontSize	输入框文本的字体大小
InputFlag	指定输入标识：可以指定输入方式为密码或者单词首字母大写（仅支持 Android 平台）
InputMode	指定输入模式：ANY 表示多行输入，其它都是单行输入，移动平台上还可以指定键盘样式。
LineHeight