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=[];

    onLoad() {

        this.init();
    }


    setData(itemArray:Array){
        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.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) {
        
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

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

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35