Cocos Creator3.8 项目实战（六）Combobox控件的实现和使用

在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);
    }

}