实现下拉框按钮ComboBox控件
创建节点
编写脚本
该功能已收录在Many Widgets插件中，使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成下拉框ComboBox控件。
插件地址：/app/detail/3147
演示地址：/video/BV113411q7vJ/
官方目前并没有在Cocos Creator中提供ComboBox控件，不过我们自己完全可以做一个，实现起来并不难。
运行效果如下：
Cocos Creator版本：2.2.0
公众号后台回复"下拉框"，获取完整项目源码：
创建节点
1. bg只是一个Sprite节点，用来当做画布背景。
2. 重点是combobox节点。它其实是一个按钮，background子节点为按钮背景，triangle子节点类型同样为Sprite，而label就是按钮上的文本了。
我们将combobox节点上的按钮组件Transition属性设置为None(之后笔者将通过三角形图片的旋转来体现玩家点击操作)：
注：关于所有节点的坐标、锚点和大小设置，笔者这里就不再截图，大家可以直接打开项目查看(大家当然也可以根据自己喜好来调整)。
我们给triangle和label节点挂上Widget组件，让他们在按钮上的相对位置固定：
triangle
label
label节点上的Label组件设置如下(默认文本为Cocos Creator，Overflow建议设置成SHRINK)：
按钮现在做好了，可以做下拉框了。下拉框我们用ScrollView控件来做，在combobox节点下创建一个dropDown节点：
现将其修改如下：
1. 将原先content节点下的item子节点删掉，换成vLayout节点(垂直布局)。
2. 在vLayout节点下有一个labelBtnItem按钮节点(已将background删掉)。
笔者这里的思路是：下拉框中的每一项内容都是按钮，当玩家点击某个按钮后，combobox下的label节点文本就直接替换为相应按钮上的文本。所有的按钮都放在垂直布局中，方便排版。
查看项目时，大家可以看到笔者将dropDown，view，content和vLayout这几个节点的大小和锚点全部设置成一样的了，大家当然也可以根据自己想法改。笔者设置好后是这个样子：
现在有一个问题：下拉框中的选项怎么添加？
我们自然而然想到将labelBtnItem变为预制，然后在脚本中创建一个包含所有下拉框选项的数组，循环该数组创建各个预制即可。
编写脚本
新建一个ComboBox.js脚本，将其挂到combobox节点上。
我们在properties中添加如下属性：
// ComboBox.jsproperties: {triangle: cc.Node,// 下拉按钮右边的小三角形comboLabel: cc.Label, // 下拉按钮上显示的文本dropDown: cc.Node,// 下拉框vLayoutNode: cc.Node, // 垂直布局contentNode: cc.Node, // 滚动视图内容itemPrefab: cc.Prefab // 下拉框选项},
首先完成"点击出现下拉框"这个功能。在onLoad中新建this.isDropDown布尔类型变量，用于判断当前下拉状态：
// ComboBox.jsonLoad () {// 是否已经下拉this.isDropDown = false;}
编写rotateTriangle方法旋转小三角图案：
// ComboBox.jsrotateTriangle () {// 旋转小三角形(正值为逆时针，负值为顺时针)if (!this.isDropDown) {let rotateAction = cc.rotateTo(0.5, 180).easing(cc.easeCubicActionOut());this.triangle.runAction(rotateAction);}else {let rotateAction = cc.rotateTo(0.5, -90).easing(cc.easeCubicActionOut());this.triangle.runAction(rotateAction);}},
点击前：
点击后：
编写showHideDropDownBox方法来显示与隐藏下拉框：
// ComboBox.jsshowHideDropDownBox () {// 下拉框显示与隐藏if (!this.isDropDown) this.dropDown.active = true;else this.dropDown.active = false;},
注：要先将dropDown节点设置为不可见。
点击前：
点击后：
编写comboboxClicked按钮方法，每当玩家点击了combobox按钮后(记得要绑定该方法)，小三角形和下拉框作出相应操作：
// ComboBox.jscomboboxClicked () {// 旋转小三角形this.rotateTriangle();// 下拉框显示与隐藏this.showHideDropDownBox();// 改变isDropDown值if (!this.isDropDown)this.isDropDown = true;else this.isDropDown = false;},
记得最后要改变this.isDropDown的值。
现在来添加下拉框中的选项内容。在onLoad中创建选项数组并调用initItems方法：
// ComboBox.jsonLoad () {// 是否已经下拉this.isDropDown = false;// 下拉框选项内容this.itemArray = ['Cocos Creator', 'Cocos-2dx', 'Cocos2d-js', 'Cocos2d-Lua', 'Cocos Creator 3D', 'Cocos Service', 'Cocos社区'];this.initItems();},
initItems方法编写如下：
// ComboBox.jsinitItems () {// 根据数组初始化下拉框中的各个选项内容let totalHeight = 0;for (let i=0; i<this.itemArray.length; i++) {let item = cc.instantiate(this.itemPrefab);item.children[0].getComponent(cc.Label).string = this.itemArray[i];item.getComponent('Item').initComboBox(this);this.vLayoutNode.addChild(item);totalHeight += item.height;}// 设置content高度if (totalHeight > this.contentNode.height) this.contentNode.height = totalHeight;}
根据数组元素创建相应的预制，各个预制之后都被添加到了vLayoutNode中。
注：我们要根据所有预制的长度总和来调整content节点的长度，否则选项内容过多的话，在滚动视图上不会显示完整的。
大家应该注意到了item.getComponent('Item').initComboBox(this);这行代码，也就是说每个预制上其实挂有一个Item.js脚本，在该脚本中我们将下拉按钮上的文本替换成了被点击按钮上的文本：
// Item.jscc.Class({extends: ponent,properties: {},// LIFE-CYCLE CALLBACKS:// onLoad () {},initComboBox (cb) {this.cb = cb;},itemBtn (event) {// 子项点击后改变下拉按钮上的文本boLabel.string = event.target.children[0].getComponent(cc.Label).string;// 选择后改变小三角和下拉框显示boboxClicked();},// update (dt) {},});
好的，教程到这就结束了，希望大家有所收获！
欢迎关注我的微信公众号，发现更多有趣内容：
