前面的文章已经介绍了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 | 输入框文本的行高 |
| MaxLength | 输入框最大允许输入的字符个数 |
| Placeholder | 输入框占位符的文本内容 |
| PlaceholderFontColor | 输入框占位符的文本字体颜色 |
| PlaceholderFontSize | 输入框占位符的文本字体大小 |
| PlaceholderLabel | 输入框占位符节点上挂载的 Label 组件对象 |
| ReturnType | 指定移动设备上面回车按钮的样式 |
| String | 输入框的初始输入内容，如果为空则会显示占位符的文本 |
| TabIndex | 修改 DOM 输入元素的 tabIndex，这个属性只有在 Web 上面修改有意义。 |
| TextLabel | 输入框输入文本节点上挂载的 Label 组件对象 |
（2）、EditBox 事件
- Editing Did Began：在用户点击输入框获取焦点的时候被触发。
- Editing Did Ended：在单行模式下面，一般是在用户按下回车或者点击屏幕输入框以外的地方调用该函数。
如果是多行输入，一般是在用户点击屏幕输入框以外的地方调用该函数。 - Text Changed：在用户每一次输入文字变化的时候被触发。但若是通过
EditBox.string的setter设置时不会派发该事件。
（3）、注意事项
- 如果需要输入密码，则需要把 Input Flag 设置为 password，同时 Input Mode 必须是 Any 之外的选择，一般选择 Single Line。
- 如果要输入多行，可以把 Input Mode 设置为 Any。
- 背景图片支持九宫格缩放
（4）、代码添加回调
添加回调的有两种方式：
- 构造一个
EventHandler对象，然后设置好对应的target、component、handler和customEventData参数。
import { _decorator, Component, EditBox, EventHandler } from 'cc'; const { ccclass, property } = _decorator; @ccclass("test") export class test extends Component { onLoad() { const editboxEventHandler = new EventHandler(); editboxEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点 editboxEventHandler.component = 'test'; editboxEventHandler.handler = 'onEditDidBegan'; editboxEventHandler.customEventData = 'data'; const editbox = this.node.getComponent(EditBox); editbox.editingDidBegan.push(editboxEventHandler); // 你也可以通过类似的方式来注册其它回调函数 // editbox.editingDidEnded.push(editboxEventHandler); // editbox.textChanged.push(editboxEventHandler); // editbox.editingReturn.push(editboxEventHandler); } onEditDidBegan(editbox, customEventData) { // 这里 editbox 是一个 EditBox 对象 // 这里的 customEventData 参数就等于你之前设置的 "data" } // 假设这个回调是给 editingDidEnded 事件的 onEditDidEnded(editbox, customEventData) { // 这里 editbox 是一个 EditBox 对象 // 这里的 customEventData 参数就等于你之前设置的 "data" } // 假设这个回调是给 textChanged 事件的 onTextChanged(text, editbox, customEventData) { // 这里的 text 表示修改完后的 EditBox 的文本内容 // 这里 editbox 是一个 EditBox 对象 // 这里的 customEventData 参数就等于你之前设置的 "data" } // 假设这个回调是给 editingReturn 事件的 onEditingReturn(editbox, customEventData) { // 这里 editbox 是一个 EditBox 对象 // 这里的 customEventData 参数就等于你之前设置的 "data" } }
- 通过
editbox.node.on('editing-did-began', ...)的方式来添加，也可以注册editing-did-ended、text-changed和editing-return事件，这些事件的回调函数的参数与editing-did-began的参数一致。
注意：这种方式注册的事件，无法传递 customEventData
// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理: import { _decorator, Component, EditBox } from 'cc'; const { ccclass, property } = _decorator; @ccclass("test") export class example test Component { @property(EditBox) editbox: EditBox | null = null; onLoad(){ this.editbox.node.on('editing-did-began', this.callback, this); } callback(editbox: EditBox){ // 回调的参数是 editbox 组件 } }
