在cocoscreator 中，没有Combobox控件，无奈之下只能自己动手写一个。
⚠️ 文末附 ComboBox.ts 、ComboBoxItem.ts 完整源码， 可直接拿去使用。
实现原理：
1、Combobox 背景图background 是一个sprite 控件，上面放了一个label 控件，用于显示选择后的文本。
2、点击 background 背景图显示 下拉列表dropDown，同时变更右边的小三角方向，向下。
3、下拉列表dropDown采用scrollow实现，点击列表项后，隐藏 dropDown ，更新 label 控件显示文本，变更右边的小三角方向，向左。
实现效果：
下面详细介绍使用方法：
step 1 ，在creator层级管理器中，新建 combobox 节点，并做如下配置：
combobox: 是一个空node 节点，作为根节点
background：背景图，是一个sprite 控件，响应点击事件
Label:combobox 选择后的文本显示
Triangle_button_flg：小三角
dropDown: scrollow 控件
content 添加 vLayout 垂直方向布局
step 2 ，独立新建一个 预制体文件 comboboxitem. prefab ，并在层级管理器中做以下布局配置：
Bg： 背景用于响应事件
label :显示文本项
step 3 ，在层级管理器中选择 combobox 节点， 在属性检查器中，将ComboBox.ts 脚本挂载到combobox 节点下。
并配置对应的属性，如下图：
step 4 ，在层级管理器中选择 comboboxitem 节点， 在属性检查器中，将ComboBoxItem.ts 脚本挂载到comboboxitem 节点下。
并配置对应的属性，如下图：
step 5、 ComboBox.ts 完整源码
import { _decorator, Component, Node,Label,instantiate, UITransform,Tween, Prefab, Sprite } from 'cc'; const { ccclass, property } = _decorator; import {ComboBoxItem} from "./ComboBoxItem" @ccclass('ComboBox') export class ComboBox extends Component { @property(Sprite) background:Sprite; /** * 下拉按钮右边的小三角形 */ @property(Node) triangle:Node; /** * 下拉按钮上显示的文本 */ @property(Label) comboLabel:Label; /** * 下拉框 */ @property(Node) dropDown:Node; /** * 垂直布局 */ @property(Node) vLayoutNode:Node; /** * 滚动视图内容 */ @property(Node) contentNode:Node; /** * 下拉框选项 */ @property(Prefab) itemPrefab:Prefab; /** * 是否下拉状态 */ isDropDown:boolean = false; /** * 下拉框选项内容 */ itemArray:Array<string>=[]; onLoad() { this.init(); } setData(itemArray:Array<string>){ this.itemArray.splice(0,this.itemArray.length); this.itemArray =itemArray; this.resetView(); } initData() { // let itemArray = ['Cocos Creator', 'Cocos-2dx', 'Cocos2d-js', 'Cocos2d-Lua', 'Cocos Creator 3D', 'Cocos Service', 'Cocos社区']; // this.setData(itemArray); } resetView() { let totalHeight = 0; for (let i=0; i<this.itemArray.length; i++) { let item = instantiate(this.itemPrefab); let comboBoxItem:ComboBoxItem = item.getComponent(ComboBoxItem).init(this); comboBoxItem.content.string = this.itemArray[i]; this.vLayoutNode.addChild(item); totalHeight += item.getComponent(UITransform).height; } // 设置content高度 if (totalHeight > this.contentNode.getComponent(UITransform).height){ this.contentNode.getComponent(UITransform).height = totalHeight; } } // 子项点击后改变下拉按钮上的文本 // 更新选择后小三角和下拉框显示 updateComboboxLabel(selText:string) { this.comboLabel.string = selText; this.isDropDown = false; this.dropDown.active = this.isDropDown; this.rotateTriangle(); } //获取当前选择的文本 getComboboxLabel():string { return this.comboLabel.string; } init() { this.isDropDown = false; this.dropDown.active = false; this.background.node.on(Node.EventType.TOUCH_START, this.onClicked, this); } onClicked(event:Event) { this.isDropDown = true; this.dropDown.active = this.isDropDown; this.rotateTriangle(); } //旋转小三角 rotateTriangle () { // step1: 创建一个针对目标的Tween对象 // 旋转小三角形(正值为逆时针，负值为顺时针) let tw = new Tween(this.triangle); if (!this.isDropDown) { // step2: 添加执行过程 tw.to(0.5, {angle:-90}); } else { // step2: 添加执行过程 tw.to(0.5, {angle:0}); } // step3: 开始执行tween对象 tw.start(); } start() { this.initData() } update(deltaTime: number) { } }
step 6、 ComboBoxItem.ts 完整源码
import { _decorator, Component, Node,Label } from 'cc'; const { ccclass, property } = _decorator; @ccclass('ComboBoxItem') export class ComboBoxItem extends Component { @property(Node) bg:Node; @property(Label) content:Label; comboBox:any; start() { } update(deltaTime: number) { } init(comboBox:any):ComboBoxItem{ this.comboBox = comboBox; this.bg.on(Node.EventType.TOUCH_START, this.onClicked, this); return this; } onClicked(event:Event) { this.comboBox.updateComboboxLabel(this.content.string); } }
