CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(1)

简介: 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 对象,然后设置好对应的 targetcomponenthandlercustomEventData 参数。
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.stringsetter 设置时不会派发该事件。


(3)、注意事项

  • 如果需要输入密码,则需要把 Input Flag 设置为 password,同时 Input Mode 必须是 Any 之外的选择,一般选择 Single Line。
  • 如果要输入多行,可以把 Input Mode 设置为 Any。
  • 背景图片支持九宫格缩放

(4)、代码添加回调

添加回调的有两种方式:

  • 构造一个 EventHandler 对象,然后设置好对应的 targetcomponenthandlercustomEventData 参数。
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-endedtext-changedediting-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 组件
    }
}


相关文章
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
5天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
86 38
|
28天前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
71 6
|
1月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。
52 7
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
|
1月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
55 6
|
1月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
48 5
|
20天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
139 3
|
1天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
114 8