跳到主要内容

下拉框（ComboBox）

ComboBox 类是一个选择控件，用于显示当前选项，并提供一个可下拉的列表供用户选择。

可以使用 add() 和 insert() 方法向下拉框中添加选项，使用 remove() 删除某个选项，或者使用 clear() 清空所有选项。当前选项的索引可以通过 index() 方法获取。

事件​

索引更改事件（indexChanged）​

当下拉框的当前索引因用户交互或程序操作发生变化时，会触发 indexChanged 事件。

即将显示事件（aboutToShowed）​

当下拉列表弹出时，会触发 aboutToShowed 事件。

即将隐藏事件（aboutToHidden）​

当下拉列表隐藏时，会触发 aboutToHidden 事件。

// 监听索引更改事件
comboBox.bind('indexChanged', (event: IndexChangeEvent): void => {
    event.index; // 当前选项的索引。
});
// 监听即将显示事件
comboBox.bind('aboutToShowed', (event: AboutToShowEvent): void => {
    event.popup; // 下拉列表控件。
});
// 下拉列表控件。
comboBox.bind('aboutToHidden', (event: AboutToHideEvent): void => {
    event.popup; // 下拉列表控件。
});

示例代码​

创建下拉框​

以下代码将创建一个下拉框。如果下拉列表过长，可以通过设置 maxMenuHeight 属性限制下拉列表的高度。

const desktop = Desktop.instance();
const comboBox = new ComboBox(desktop);
comboBox.add('Windows 7');
comboBox.add('Windows 8');
comboBox.add('Windows 10');
comboBox.add('Windows Server 2016');
comboBox.add('Mac OS');
comboBox.add('Mac OS');
comboBox.add('Ubuntu');
comboBox.add('Debian');
comboBox.add('Alpine');
comboBox.add('CentOS');
comboBox.add('Android');
comboBox.add('iOS');
comboBox.add('Unix');
comboBox.add('FreeBSD');
comboBox.add('Palm OS');
comboBox.add('OS/2');
comboBox.add('RedHat');
comboBox.add('Solaris');
comboBox.add('Chrome OS');
comboBox.maxMenuHeight = 200; //限制下拉列表的最大高度
comboBox.index = 1; // 设置当前选项的索引