cocos creator 的表单中使用单选、多选、复选、下拉框、输入框等组件的实例

本篇文章主要讲解：使用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 创建单行文本输入框及多行文本输入框

最终效果：