深圳公司网站设计企业详情页设计 制作

Qt 中，QComboBox 默认只支持单选，但实际使用过程中，我们经常会碰到需要多选的情况，但是通过一些直接或者曲折的方法还是可以实现的。

1、通过 QListWidget 间接实现

这种方式是网上搜索最多的一种方式，也是相对来说比较简单的一种方法。

首先，自定义ComboBox类并继承自 QComboBox，在类内并定义一个QListWidget对象。

class MultiWdgComboBox : public QComboBox
{Q_OBJECT
public:using QComboBox::QComboBox;MultiComboBox(QWidget* parent = nullptr);void addItem(const QString &text, const QVariant &userData /* = QVariant() */);private:QListWidget* m_view_ptr{ nullptr };QString m_text{ QString() };
};

如上所示，定义好自定义之后，在其构造函数中对ComboBox的 view 和 model 重新设置。因为多选情况下控件显示的内容可能需要自定义，QComboBox默认是不支持的，所以我们可以使用QComboBox自带的QLineEdit 来实现自定义格式的数据显示。

MultiWdgComboBox::MultiWdgComboBox(QWidget* parent) : QComboBox(parent)
{m_view_ptr = new QListWidget;m_view_ptr->setContentsMargins(QMargins(15, 0, 0, 0));setEditable(true);lineEdit()->setReadOnly(true);setModel(m_view_ptr->model());setView(m_view_ptr); }

紧接着，我们需要重写基类的 addItem 函数，让其能满足我们自定义的类。下面的这种方式也就是在我们定义的 QListWdiget 对象中 insert 一个item，并对 item 设置对应的QWidget。

void MultiWdgComboBox::addItem(const QString &text, const QVariant &userData)
{QListWidgetItem *pItem = new QListWidgetItem;QCheckBox* checkBox = new QCheckBox(this);checkBox->setText(text);pItem->setData(Qt::UserRole, userData);m_view_ptr->addItem(pItem);m_view_ptr->setItemWidget(pItem, checkBox);...
}

为了方便我们在点击 QCheckBox 时能实时改变显示的数据，我们需要实现一个信号槽的连接。

void MultiWdgComboBox::addItem(const QString &text, const QVariant &userData)
{...QCheckBox* checkBox = new QCheckBox(this);...connect(checkBox, &QCheckBox::clicked, this, [this](bool checked){auto box = static_cast<QCheckBox*>(sender());QStringList texts = m_text.isEmpty() ? QStringList() : m_text.split(";");if (checked){texts.append(box->text());}else{texts.removeOne(box->text());}m_text = texts.join(";");this->setEditText(m_text);});
}

有了上面的步骤，基本上一个简单的多选 ComboBox 控件就初具雏形了。

如果初始状态下，已经有部分的item被选中了，那我们该如何设置对应的item状态呢？

void MultiWdgComboBox::setData(const QVariant& data)
{QStringList text;QVariantList datas = data.value<QVariantList>();for (int index = 0; index < m_view_ptr->count(); ++index){auto item = m_view_ptr->item(index);auto ptr = static_cast<QCheckBox*>(m_view_ptr->itemWidget(item));if (datas.contains(item->data(Qt::UserRole))){if (ptr != nullptr && ptr->isEnabled()){ptr->setChecked(true);text.push_back(ptr->text());}}}m_text = text.join(";");
}

上面的这个函数是根据item的userData来进行设置的，当然也可以通过item的text来进行设置。

同理，获取已经选中的item数据是一样的道理。

QVariant MultiWdgComboBox::data() const
{QVariantList datas;for (int index = 0; index < m_view_ptr->count(); ++index){auto item = m_view_ptr->item(index);auto ptr = static_cast<QCheckBox*>(m_view_ptr->itemWidget(item));if (ptr != nullptr && ptr->isChecked()){datas.push_back(item->data(Qt::UserRole));}}return datas;}

当然如果 item 的 userData 没有实际的意义，只是想标识一下被勾选的item，也可以用 二进制的方式来实现，最后可通过循环右移一位的方式遍历获得勾选的全部item项。也可以使用 Qt 的 QFlags 属性来实现。

根据上面的内容，我们基本上已经实现了一个ComboBox 的基本功能，但是由于使用了 QComboBox的edit属性，所以存在一个不好的体验，就是在点击下拉的时候，响应区域只有下拉箭头表示的那部分范围，而在 其 QLineEdit 所在的范围并不响应。

所以，根据以前 《QComboBox文字居中的几种实现方式》这篇文章的内容，对自定义ComboBox的显示部分做了重新绘制。

重写 paintEvent 事件函数即可。

void MultiWdgComboBox::paintEvent(QPaintEvent* e)
{QStylePainter painter(this);painter.setPen(palette().color(QPalette::Text));QStyleOptionComboBox opt;initStyleOption(&opt);painter.drawComplexControl(QStyle::CC_ComboBox, opt);if (opt.editable){painter.drawControl(QStyle::CE_ComboBoxLabel, opt);return;}QRect editRect = this->style()->subControlRect(QStyle::CC_ComboBox, &opt, QStyle::SC_ComboBoxEditField, this);QStyleOptionButton buttonOpt;buttonOpt.initFrom(this);buttonOpt.direction = Qt::LeftToRight;buttonOpt.rect = editRect;buttonOpt.text = m_text;buttonOpt.icon = opt.currentIcon;buttonOpt.iconSize = opt.iconSize;painter.drawControl(QStyle::CE_CheckBoxLabel, buttonOpt);}

2、另辟蹊径，使用 QPushBututon 的 setMenu 方法，set一个 自定义Action的Menu。

这种方法呢，是我在做其他需求的时候偶然发现的，原来一些比较复杂的控件都可以用原生的控件可以实现。
首先，自定义一个继承自 QPushButton的子类 MultiButtonComboBox。

class MultiButtonComboBox : public QPushButton
{Q_OBJECT
public:MultiButtonComboBox(QWidget* parent = nullptr);void addItem(const QString& text, const QVariant& data = QVariant());void setData(const QVariant& data);QVariant data() const;private:MultiListWidget* m_ptr{ nullptr };
};

如上所示，定义好自定义之后，在其构造函数中设置一个自定义界面的menu。

MultiButtonComboBox::MultiButtonComboBox(QWidget* parent) : QPushButton(parent)
{auto menu = new QMenu(this);m_ptr = new MultiListWidget(this);QWidgetAction *action = new QWidgetAction(this);action->setDefaultWidget(m_ptr);menu->addAction(action);setMenu(menu);connect(m_ptr, &MultiListWidget::signal_text, this, [this](const QString& text){setText(text);});}

设置好自定义的菜单界面之后，只需要根据需要实现自定义的菜单界面就行了。可以用 QListWidget, 也可以用 QListView，我这边用的是 QListView 和 自定义listview 的 item 代理实现的。

class MultiListWidget : public QWidget
{Q_OBJECTpublic:MultiListWidget(QWidget *parent = nullptr);~MultiListWidget();void addItem(const QString& text, const QVariant& userData);void setData(const QVariant& data);QVariant data() const;private:void initPage();signals:void signal_text(const QString& text);private:Ui::MultiListWidget *ui;QStandardItemModel* m_pModel{ nullptr };QString m_text{ QString() };};

这种方式的实现是比较简单的，对 QListView 设置 item 代理及 model 之后，后续的操作只是对 model 的数据操作。为了图方便，使用了标准的 QStandardItemModel 类，当然可以自定义 model 类，通过重写 自定义类的 data 函数，能更好的满足自定义功能的需求。

void MultiListWidget::initPage()
{m_pModel = new QStandardItemModel();auto *delegate = new CmbBoxItemDelegate(this);ui->listView->setItemDelegate(delegate);ui->listView->setModel(m_pModel);...
}

自定义 QListView 的 item 代理后，可以通过重写它的 editorEvent 函数来控制item的编辑事件。那我们就可以通过实现 代理与 当前类的信号槽来实现我们已经选择、显示的item 数据。

void MultiListWidget::initPage()
{...auto *delegate = new CmbBoxItemDelegate(this);...connect(delegate, &CmbBoxItemDelegate::signal_btn_clicked, this, [this](const QModelIndex& index){QStringList texts = m_text.isEmpty() ? QStringList() : m_text.split(";");bool checked = !index.data(Qt::UserRole + 1).toBool();m_pModel->setData(index, checked, Qt::UserRole + 1);if (checked){texts.append(index.data(Qt::DisplayRole).toString());}else{texts.removeOne(index.data(Qt::DisplayRole).toString());}m_text = texts.join(";");emit signal_text(m_text);});
}

紧接着，实现 addItem 函数。

void MultiListWidget::addItem(const QString& text, const QVariant& userData)
{QStandardItem *pItem = new QStandardItem;pItem->setData(false, Qt::UserRole + 1);pItem->setData(text, Qt::DisplayRole);pItem->setData(userData, Qt::UserRole);m_pModel->appendRow(pItem);
}

setData函数。

void MultiListWidget::setData(const QVariant& data)
{QStringList texts;auto datas = data.toList();for (int index = 0; index < m_pModel->rowCount(); ++index){auto mIndex = m_pModel->index(index, 0);if (datas.contains(mIndex.data(Qt::UserRole))){m_pModel->setData(mIndex, true, Qt::UserRole + 1);texts.append(mIndex.data().toString());}}m_text = texts.join(";");emit signal_text(m_text);
}

data 函数。

QVariant MultiListWidget::data() const
{QVariantList datas;for (int index = 0; index < m_pModel->rowCount(); ++index){auto mIndex = m_pModel->index(index, 0);if (mIndex.data(Qt::UserRole + 1).toBool()){datas.append(mIndex.data(Qt::UserRole));}}return datas;
}

3、自定义QComboBox 的 item delegate

这种方式跟上面第二种来说是差不多的，只不过上面的第二种方法实现的比较曲折，而QComboBox的view也可以是个ListView。所以我们取了第一种方法的绘制显示text的方法和第二种的item代理，结合就有了第三种方法。相对来说，这种方法更简单直接些。

首先自定义继承自QComboBox的类并设置代理，实现代理的信号槽函数。

MultiWdgComboBox::MultiViewComboBox(QWidget* parent) : QComboBox(parent)
{auto delegate = new CmboBoxItemDelegate(this);setItemDelegate(delegate);connect(delegate, &CmboBoxItemDelegate::signal_btn_clicked, this, [this](const QModelIndex& index){auto checked = !index.data(Qt::UserRole + 1).toBool();this->model()->setData(index, checked, Qt::UserRole + 1);QStringList texts = m_text.isEmpty() ? QStringList() : m_text.split(";");if (checked){texts.append(index.data().toString());}else{texts.removeOne(index.data().toString());}m_text = texts.join(";");});
}

这种方式也是唯一一种不需要重写 addItem 方法的实现形式，后面的 setData 和 data 与上面第二种方式的完全一样。

这种方式要避免多次设置item的代理，否则代理可能不生效。

如果我们使用的是第一种方法，鼠标点击的范围如果超过了每行QCheckBox的实际范围，实际效果下来是，既没有选中某行，comboBox的下拉框也会收起。

同样的，如果使用的是第三种，自定义了QComboBox的 item 代理，点击起哄一行也会将下拉框收起，这样我们要完成多选的话就得点击好几次。

所以，我们可以通过重写hidePopup函数来避免这个问题。

void MultiViewComboBox::hidePopup()
{QWidget *popup = this->findChild<QFrame*>();if(!popup->geometry().contains(QCursor::pos())){QComboBox::hidePopup();}
}

4、注意事项

在第一种使用 QListWidget 的时候，测试时出现了下面这种情况。

这个问题的原因是我们给QListWidget设置了model，为什么呢？因为根据Qt已经有的那种 model/view的结构，QListWidget已经是对应的结构了，它有自己的model，如果想要通过重写自己的model来实现数据的话，建议使用QlistView。

但是在这个里面，我们已经选择了QListWidget，那有没有什么解决办法。

其实我们只需要在给ComboBox设置view之前设置model就可以了，也就是说，下面的这两行代码顺序不能互换。

MultiComboBox::MultiComboBox(QWidget* parent) : QComboBox(parent)
{...setModel(m_view_ptr->model());setView(m_view_ptr); }

测试代码