当前位置：首页 > news >正文

【QT常用技术讲解】自定义支持多选项的下拉框

news 2025/10/4 5:08:48

前言

QComboBox是QT自带的下拉框组件，适合“从多个选项中选中一个”的场景，QComboBox可以显示checkbox，但效果也是“多选1”，本人在应用开发中，因为需要支持的勾选项比较多，全部显示在一个界面中会非常难看，需要一个能够收纳所有选项类型，并且不占位置的控件，那么把QComboBox改造成支持多选项即可。

效果图

功能讲解

以下讲解的自定义多选项列表框是加载mainwindow窗口中的，方便大家加入到自己的项目中。

自定义控件代码

//MultiSelectComboBox.h
#ifndef MULTISELECTCOMBOBOX_H
#define MULTISELECTCOMBOBOX_H#include <QComboBox>
#include <QListWidget>
#include <QLineEdit>
#include <QCheckBox>class MultiSelectComboBox : public QComboBox {Q_OBJECT
public:explicit MultiSelectComboBox(QWidget *parent = nullptr);void addItem(const QString &text);// 添加选项项QStringList selectedItems() const;signals:// 选项状态改变信号，参数为当前选中项的文本列表void itemCheckedStateChanged(const QStringList& selectpro);private slots:void updateSelectedItems();// 更新选中项显示private:QListWidget *listWidget;QLineEdit *lineEdit;
};
#endif

//MultiSelectComboBox.cpp
#include "MultiSelectComboBox.h"MultiSelectComboBox::MultiSelectComboBox(QWidget *parent): QComboBox(parent) {listWidget = new QListWidget(this);//列表控件(用于显示可选项目)lineEdit = new QLineEdit(this);//列表控件的文本编辑框(用于显示已选项)lineEdit->setReadOnly(true);// 设置为只读模式//设置模型和视图setModel(listWidget->model()); //设置列表控件的模型setView(listWidget);//设置列表控件为视图setLineEdit(lineEdit); //设置文本编辑框
}//添加选项
void MultiSelectComboBox::addItem(const QString &text) {QListWidgetItem *item = new QListWidgetItem(listWidget);// 创建列表项QCheckBox *checkBox = new QCheckBox(text, this);//创建带文本的复选框//将复选框添加到列表控件listWidget->addItem(item);listWidget->setItemWidget(item, checkBox);//连接复选框状态改变信号connect(checkBox, &QCheckBox::stateChanged, this, &MultiSelectComboBox::updateSelectedItems);
}//获取当前选中项文本列表
QStringList MultiSelectComboBox::selectedItems() const {QStringList items;for(int i = 0; i < listWidget->count(); ++i) {QCheckBox *checkBox = qobject_cast<QCheckBox*>(listWidget->itemWidget(listWidget->item(i)));if(checkBox && checkBox->isChecked()) {//如果复选框存在且被选中items << checkBox->text();}}return items;
}//更新选中项显示
void MultiSelectComboBox::updateSelectedItems() {lineEdit->setText(selectedItems().join(", "));//发射选项状态改变信号emit itemCheckedStateChanged(selectedItems());
}

mainwindow引用自定义控件

在mainwindow.ui的UI界面中，添加一个combobox控件，打开控件的右键菜单，选择“提升为...”，会弹出以下的对话框：

【提升的类名称】填写自定义控件中的类名称；

【头文件】填写mainwindow.cpp文件引用的自定义控件类所在的头文件（如果与mainwindow.cpp不在同一个目录下，需要带上路径）；

继续点击添加、提升即可。

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "MultiSelectComboBox.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);ui->comboBox->addItem("类型1");ui->comboBox->addItem("类型2");ui->comboBox->addItem("类型3");ui->comboBox->addItem("类型4");ui->comboBox->addItem("类型5");QObject::connect(ui->pushButton, &QPushButton::clicked, [this](){qDebug() << "Selected:" << ui->comboBox->selectedItems();QMessageBox::information(this, "提示框", ui->comboBox->selectedItems().join(", "));});//连接信号---这里获取到当前最新的选项connect(ui->comboBox, &MultiSelectComboBox::itemCheckedStateChanged, [](const QStringList& selectpro) {for (const auto &item : selectpro) {qDebug() << "select:" << item;}qDebug() << "=====" ;});
}MainWindow::~MainWindow()
{delete ui;
}

引用很简单，ui->comboBox控件已经提升绑定为自定义的控件，直接引用成员函数。

    添加成员ui->comboBox->addItem("类型1");ui->comboBox->addItem("类型2");ui->comboBox->addItem("类型3");ui->comboBox->addItem("类型4");ui->comboBox->addItem("类型5");

//连接信号---这里获取到当前最新的选项，方便代码移植connect(ui->comboBox, &MultiSelectComboBox::itemCheckedStateChanged, [](const QStringList& selectpro) {for (const auto &item : selectpro) {qDebug() << "select:" << item;}qDebug() << "=====" ;});