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); }
测试代码