Qt QComboBox 下拉复选多选

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 和 自定义listviewitem 代理实现的。

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

测试代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/75952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Selenium自动化:玩转浏览器,搞定动态页面爬取

嘿&#xff0c;各位爬虫爱好者和自动化达人们&#xff01;是不是经常遇到这种情况&#xff1a;信心满满地写好爬虫&#xff0c;requests一把梭&#xff0c;结果抓下来的HTML里&#xff0c;想要的数据空空如也&#xff1f;定睛一看&#xff0c;原来数据是靠JavaScript动态加载出…

天梯赛 L2-023 图着色问题

使用vector<vector<int>> g(N)去存储边&#xff0c;然后每次判断每个节点的邻节点是不是相同的颜色&#xff0c;需要注意的是不同的颜色一定需要为K种&#xff0c;不能多也不能少。 #include<bits/stdc.h> using namespace std; int main(){int n,m,k;cin&g…

在ubuntu24上装ubuntu22

实验室上有一台只装了ubuntu24的电脑&#xff0c;但是项目要求在22上进行 搞两个ubuntu系统&#xff01; 步骤一&#xff1a;制作22的启动盘 步骤二&#xff1a;进入bios安装界面 步骤三&#xff1a;选择try or install ubuntu 步骤四&#xff1a;选择try ubuntu 步骤五&…

【PVR Review】《Review of Deep Learning Methods for Palm Vein Recognition》

[1]谭振林,刘子良,黄蔼权,等.掌静脉识别的深度学习方法综述[J].计算机工程与应用,2024,60(06):55-67. 文章目录 1、Background and Motivation2、数据采集3、掌脉图像预处理3.1、ROI提取算法3.2、图像滤波与增强 4、掌脉识别算法4.1、基于深度学习的方法4.2、其他方法 5、融合识…

【CSP】202403-1词频统计

文章目录 算法思路1. 数据结构选择2. 输入处理3. 统计出现的文章数4. 输出结果 代码示例代码优化 样例输入 4 3 5 1 2 3 2 1 1 1 3 2 2 2 2 3 2样例输出 2 3 3 6 2 2算法思路 1. 数据结构选择 vector<int>&#xff1a;用于存储每篇文章的单词列表&#xff08;可能包含…

Docker基础1

本篇文章我将从系统的知识体系讲解docker的由来和在linux中的安装下载 随后的文章会介绍下载镜像、启动新容器、登录新容器 如需转载&#xff0c;标记出处 docker的出现就是为了节省资本和服务器资源 当企业需要一个新的应用程序时&#xff0c;需要为它买台全新的服务器。这样…

Linux系统学习Day04 阻塞特性,文件状态及文件夹查询

知识点4【文件的阻塞特性】 文件描述符 默认为 阻塞 的 比如&#xff1a;我们读取文件数据的时候&#xff0c;如果文件缓冲区没有数据&#xff0c;就需要等待数据的到来&#xff0c;这就是阻塞 当然写入的时候&#xff0c;如果发现缓冲区是满的&#xff0c;也需要等待刷新缓…

vue 3 从零开始到掌握

vue3从零开始一篇文章带你学习 升级vue CLI 使用命令 ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run servenvm管理node版本&#…

Mysql专题篇章

一、事务的四大特性&#xff1f; 1、原子性&#xff1a;是指事务包含的所有操作要么全部成功&#xff0c;要么全部失败回滚。 2、一致性&#xff1a;是指一个事务执行之前和执行之后都必须处于一致性状态。比如a与b账户共有100块&#xff0c;两人之间转账之后无论成功还是失败…

CAD插件实现:自动递增编号(前缀、后缀、位数等)——CADc#实现

cad中大量输入一定格式的递增编号时&#xff0c;可用插件实现&#xff0c;效果如下&#xff1a; ①本插件可指定数字位数、起始号码、加前缀、后缀、文字颜色等&#xff08;字体样式和文字所在图层为cad当前图层和当前字体样式&#xff09;。 ②插件采用Jig方式&#xff0c;即…

k8s1.24升级1.28

0、简介 这里只用3台服务器来做一个简单的集群&#xff0c;当前版本是1.24.17目标升级到1.28.17 地址主机名192.168.160.40kuber-master-1192.168.160.41kuber-master-2192.168.160.42kuber-node-1 因为1.24已经更换过了容器运行时&#xff0c;所以之后的升级相对就会简单&am…

4.3-2 jenkins

一.登录jenkins 二.修改密码 三.配置节点 新建节点 编辑节点名称 编辑节点配置 激活节点 将jar下载到指定的路径 再到dos命令下的路径 E:\az\wx 执行 配置节点成功 四. 安全设置中&#xff0c;勾选代理 五.新建项目 编辑项目名称 编辑项目执行的 路径&#xff1a;C:\Users\Ad…

js对象与数组的互转

js对象与数组的互转 文章目录 js对象与数组的互转一、数组转对象1.使用forEach,for in,es6展开运算符,assign2. 使用 Object.fromEntries()3. 将数组转为键值对对象4. 使用 reduce()4. 数组元素为对象时提取属性 二、对象转数组1. 提取键/值/键值对2. 转换为特定结构的数组 三、…

HTTPS在信息传输时使用的混合加密机制,以及共享、公开密钥加密的介绍。

HTTPS在信息传输时使用的混合加密机制&#xff0c;其中包括了共享密钥加密和公开密钥加密&#xff0c;我们先来介绍一下这两种加密方式。 共享密钥加密&#xff08;对称密钥&#xff09; 对称加密是指加密和解密使用的是同一个密钥。就像家里的门锁&#xff0c;钥匙只有一把&…

Oracle 23ai Vector Search 系列之4 VECTOR数据类型和基本操作

文章目录 Oracle 23ai Vector Search 系列之4 VECTOR数据类型和基本操作VECTOR 数据类型基本语法Vector 维度限制和向量大小向量存储格式&#xff08;DENSE vs SPARSE&#xff09;1. DENSE存储2. SPARSE存储3. 内部存储与空间计算 Oracle VECTOR数据类型的声明格式VECTOR基本操…

机器学习——ROC曲线、PR曲线

一、ROC曲线简介 1.1 ROC曲线的构成 1.横轴&#xff08;假正率&#xff0c;FPR&#xff09;&#xff1a; 表示负样本被错误分类为正的比例&#xff08;越小越好&#xff09; 2.纵轴&#xff08;真正率&#xff0c;TPR&#xff0c;即召回率&#xff09;&#xff1a; 表示正样…

IntelliJ IDEA下开发FPGA——FPGA开发体验提升__上

前言 由于Quartus写代码比较费劲&#xff0c;虽然新版已经有了代码补全&#xff0c;但体验上还有所欠缺。于是使用VS Code开发&#xff0c;效果如下所示&#xff0c;代码样式和基本的代码补全已经可以满足开发&#xff0c;其余工作则交由Quartus完成 但VS Code的自带的git功能&…

昂贵的DOM操作:一次DOM导致的性能问题排查记录

公司来了一个前端实习生&#xff0c;踏实&#xff0c;勤快&#xff0c;很快得到老大的认可&#xff0c;分配给她一个需求&#xff0c;大概如下&#xff1a;构建一个公司产品的评论展示页面&#xff0c;页面可以滚动加载新的内容&#xff0c;同时如果已经加载的内容发生变化&…

前端服务配置详解:从入门到实战

前端服务配置详解&#xff1a;从入门到实战 一、环境配置文件&#xff08;.env&#xff09; 1.1 基础结构 在项目根目录创建 .env 文件&#xff1a; # 开发环境 VUE_APP_API_BASE_URL http://localhost:3000/api VUE_APP_VERSION 1.0.0# 生产环境&#xff08;.env.produc…

【学习笔记】计算机网络(七)—— 网络安全

第7章 网络安全 文章目录 第7章 网络安全7.1 网络安全问题概述7.1.1 计算机网络面临的安全性威胁7.1.2 安全的计算机网络7.1.3 数据加密模型 7.2 两类密码体制7.2.1 对称密钥密码体制7.2.2 公钥密码体制 7.3 鉴别7.3.1 报文鉴别7.3.2 实体鉴别 7.4 密钥分配7.4.1 对称密钥的分配…