本篇文章主要讲解:使用cocos creator 是如何使用表单中单选、多选、复选、下拉框、输入框等组件的方法。
作者:任聪聪
日期:2023年2月7日
cocos 引擎版本2.4.3

提示: 如果是新手同学,建议结合附件中的demo,来进行学习,这样会有一个整体的操作认知,掌握表单制作的能力也会快一点。

文章附件下载地址:https://download.csdn.net/download/hj960511/87424999

一、按钮的使用

1.1 构造按钮及修改样式

步骤一、点击button组件,拖拽到画布中
在这里插入图片描述
步骤二、点击button组件,在左侧可以看到相对应的属性及尺寸,这里我们可以多按钮的大小和尺寸进行调整以及背景和交互效果。
在这里插入图片描述
步骤三、修改按钮的名称,点击左侧的层级管理中的,label。
在这里插入图片描述
在右侧我们就会看到
在这里插入图片描述
点击修改string为,按钮ok。
在这里插入图片描述

1.2 事件绑定及获取数据

步骤一、创建一个脚本,右击选择typescript
在这里插入图片描述
步骤二、点击空节点,绑定这个脚本,如下:
在这里插入图片描述
步骤三、点击button
在这里插入图片描述
找到右侧的click events,输入一
在这里插入图片描述
步骤四、拖拽空节点到cc.node中,并选择脚本,选择脚本中的函数。
在这里插入图片描述

步骤五、修改class name 及创建一个按钮函数

    //按钮绑定事件
    testBtn (e,v) {
        cc.log(e,v)
    }

creator中的配置
在这里插入图片描述
查看点击效果:
在这里插入图片描述

二、单选组件绑定及获取参数说明

2.1 单选框的配置

步骤一、创建单选框组件
在这里插入图片描述
步骤二、点击 checkmark 修改单选框的默认属性
在这里插入图片描述
步骤三、增加文本说明,右击组件选择label
在这里插入图片描述
label配置如下:
在这里插入图片描述
实际效果:
在这里插入图片描述

2.2 单选框获取数据

步骤一、绑定事件,与上一步相同,这里不做细讲
在这里插入图片描述

步骤二、创建对应事件

    //radio事件
    radioBtn(e,v){
        cc.log(v)
        this.radio_txt.string = "单选框数据:"+v;
    }

实际效果:
在这里插入图片描述

三、多选框的创建及数据获取

步骤一、创建多选框,并自定义多选组件。
在这里插入图片描述
步骤二、创建事件并绑定事件

事件代码:
在这里插入图片描述

绑定事件:
在这里插入图片描述
tips:与其他组件的绑定形式一致。

实际效果:
在这里插入图片描述
tips:上述需要声明对象,并绑定对象,这个在文章的附件中有整体的体现。也可以看我的这篇文章学习如何声明页面对象,控制页面元素变化。【Cocos新手入门】cocos creator操作 canvas绑定脚本及通过代码操作label组件变化的方法
在这里插入图片描述

如上图所示,本文章所绑定的相关组件信息。

四、下拉框

步骤一、创建一个按钮,并修改为如下样式
在这里插入图片描述
步骤二、创建一个select_box的空节点
在这里插入图片描述
步骤三、给空节点绑定上layout的布局,并设置为如下,改为:select_item_box
在这里插入图片描述
在空节点中创建item,label类型的。
在这里插入图片描述
步骤四、修改样式
在这里插入图片描述
步骤五、将opacity改为0,隐藏itembox

在这里插入图片描述

步骤六、绑定事件
在这里插入图片描述

事件代码:
在这里插入图片描述
绑定item的事件
在这里插入图片描述

五、输入框

5.1 单行及多行文本说明

在这里插入图片描述
文本框属性说明
string :默认的输入框存在的值

placeholder :提示信息,输入即消失

input mode: any为多行,其他都为单行

max length : 最大输入字符数限制

5.2 文本框的数据获取方式

1.监听状态说明

如下是一个文本框的四种监听状态类型,分为输入开始、输入改变、输入结束、输入返回
在这里插入图片描述

此处的绑定方式也可在我上方提到的文章内容中找到。

2.监听输入数据并赋值

说明:分别为四种形式的数据获取形式,通过一个函数来做演示,查看我们输入表单后对数据的获取效果。

代码片段:

	// v 值  e 事件对象  s 为customEventData的值
    getInput(v,e,s){
        console.log(v,e,s)
    }

监听效果,四种形式
在这里插入图片描述
故此:我们选择适合自己场景下的方式即可,这里我们选择的是changed 的状态类型

文本框操作详细教程:【Cocos新手入门】使用 cocos creator 创建单行文本输入框及多行文本输入框

最终效果:
在这里插入图片描述

Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐