QT 创建一个具有复选功能的下拉列表控件
最近研究了好多东西,前两天突然想做一个具有复选功能的下拉列表框。然后在网上“学习”了很久之后,终于发现了一个可以用的,特地发出来记录一下。
一、第一步肯定是先创建一个PROJECT了,这里对工 PROJECT的类型没有太大的要求,QMainWindow、QWidget、QDialog都是没关系的。
二、这里需要添加我们的代码了。这里我们用CCheckCombox来命名把,添加新文件:CCheckCombox.h和对应的CCheckCombox.cpp。
CCheckCombox.h的文件代码如下:
1 #ifndef CCHECKCOMBOX_H 2 #define CCHECKCOMBOX_H 3 4 #include <QComboBox> 5 #include <QMouseEvent> 6 #include <QAbstractItemView> 7 #include <QItemSelectionModel> 8 9 class CCheckCombox : public QComboBox 10 { 11 Q_OBJECT 12 public: 13 explicit CCheckCombox(QWidget *parent = 0); 14 15 //添加下拉框内容 16 void appendItem(const QString &text, bool bChecked); 17 18 //QComboBox的虚函数用来隐藏列表框,当单击是复选框时不让隐藏,用来改变状态 19 void hidePopup(); 20 21 protected: 22 void mousePressEvent(QMouseEvent *event); 23 24 private: 25 //更新更改项的状态 26 void updateIndexStatus(int index); 27 28 signals: 29 //状态改变后发送一个信号,告诉外界。 30 void checkedStateChange(int index, bool bChecked); 31 32 public slots: 33 34 }; 35 36 #endif // CCHECKCOMBOX_H
然后是我们的CCheckCom.cpp的代码:
1 #include "ccheckcombox.h" 2 3 CCheckCombox::CCheckCombox(QWidget *parent) : 4 QComboBox(parent) 5 { 6 7 } 8 9 void CCheckCombox::appendItem(const QString &text, bool bChecked) 10 { 11 QIcon icon; 12 if( bChecked ) 13 { 14 icon.addFile(":/Image/check.png"); 15 } 16 else 17 { 18 icon.addFile(":/Image/uncheck.png"); 19 } 20 21 addItem(icon, text, bChecked); 22 } 23 24 void CCheckCombox::updateIndexStatus(int index) 25 { 26 bool bChecked = this->itemData(index).toBool(); 27 28 if( bChecked ) 29 { 30 this->setItemIcon(index, QIcon(":/Image/uncheck.png")); 31 } 32 else 33 { 34 this->setItemIcon(index, QIcon(":/Image/check.png")); 35 } 36 37 setItemData(index, !bChecked); 38 39 emit checkedStateChange(index, !bChecked); 40 } 41 42 void CCheckCombox::mousePressEvent(QMouseEvent *event) 43 { 44 int x = event->pos().x(); 45 46 int iconWidth = this->iconSize().width(); 47 48 if( x <= iconWidth ) 49 { 50 int index = this->currentIndex(); 51 52 updateIndexStatus(index); 53 } 54 else 55 { 56 QComboBox::mousePressEvent(event); 57 } 58 } 59 60 void CCheckCombox::hidePopup() 61 { 62 int iconWidth = this->iconSize().width(); 63 64 int x = QCursor::pos().x() - mapToGlobal(geometry().topLeft()).x() + geometry().x(); 65 66 int index = view()->selectionModel()->currentIndex().row(); 67 68 if( x >= 0 && x <= iconWidth ) 69 { 70 updateIndexStatus(index); 71 } 72 else 73 { 74 QComboBox::hidePopup(); 75 } 76 }
值得注意的是,这里我们的选中和为选种采用了图片来确定。所以我们还需要通过截图来获得一个对勾选中和一个为选中图片。
然后我们的这个时候需要从ui中托一个Combobox控件到窗口上。
之后我们需要把这个Combobox控件提升为一个CCheckCombox的类:
右键单击控件选择提升为,之后填入相应的信息。
第一步输入类名称,然后点击添加,第三步需要点击添加后的类名称选中。然后点击提升类。
到这里,我们的CCheckCombox已经成功提升了,接下来就是添加里边的item了。
我这里构造了一个ADD方法来添加测试item,大家使用的时候直接调用appendItem()方法就可以直接添加,第一个参数为text,第二个参数为默认选中状态。
然后我们测试一下,看行不行。。。。。。
item是成功添加了,但是还没有复选框,原因在于,我们刚才说到,这里的选中状态是由图片来控制的,所以我们要带入资源文件。
添加成功过之后我们再来测试一下。
好的,到这里,我们的控件已经可以使用了,后期我们如果要取出这些选中的内容的话,只需要使用itemData(i).toBool()方法来判断就行了。
下面是本文用到的代码相关文件。CCheckCombox的两个文件来自网络,不记得是哪位大佬发的了,在这里特别感谢。
下载地址:https://git.coding.net/HULANG-BTB/QT_CCheckCombox.git