QT实现制作一个ListView列表的示例代码

目录

1、概述2、代码示例

1.自定义QListWidget2.自定义QListWidgetItem3.使用

3、图片演示

1、概述

案例：使用Qt制作一个ListView。点击ListView的Item可以用于测试OpenCV的各种效果
自定义一个：MainListView继承QListWidget 、MainListViewItem继承QListWidgetItem

2、代码示例


1.自定义QListWidget

mainlistview.h

1. class MainListView : public QListWidget
2. {
3.     Q_OBJECT
4. public:
5.     explicit MainListView(QWidget *parent = nullptr);
6. protected:
7.     void mousePressEvent(QMouseEvent *event);
8.     void mouseReleaseEvent(QMouseEvent *event);
9.     void mouseMoveEvent(QMouseEvent *event);
10.     void leaveEvent(QEvent *event);
11. private:
12.     QPoint startPoint;
13.     MainListViewItem *theHighlightItem = nullptr;
14.     MainListViewItem *oldHighlightItem = nullptr;
15.     MainListViewItem *theSelectedItem = nullptr;
16.     MainListViewItem *oldSelectedItem = nullptr;
17.     Chapter3Option * option = new Chapter3Option();
19. signals:
21. public slots:
22.     void updateSelectedIcon();
23.     void onMainItemClick(QListWidgetItem *item);
24. };

复制代码

mainlistview.cpp

1. #include "mainlistview.h"
3. MainListView::MainListView(QWidget *parent) : QListWidget(parent)
4. {
5.     setMouseTracking(true);
6.     //连接信号与槽函数，假设选中项发生变化则触发item图标的更新.都是当前对象发生
7.     connect(this,&MainListView::itemSelectionChanged,this,&MainListView::updateSelectedIcon);
8.     connect(this,&MainListView::itemClicked,this,&MainListView::onMainItemClick);
9. }
11. /**
12. * 处置鼠标hove事件，item图标就变成hove状态
13. * @brief MainListView::mouseMoveEvent
14. * @param event
15. */
16. void MainListView::mouseMoveEvent(QMouseEvent *event){
17.     oldHighlightItem = theHighlightItem;
18.     theHighlightItem = static_cast<MainListViewItem *>(itemAt(event->pos()));
19.     //旧的hover的item图标回复原状(条件是该item没有被选中)
20.     //新的hover的iten图标变成hover状态(条件是该item没有被选中)
21.     if(oldHighlightItem != theHighlightItem){
22.        if(oldHighlightItem && !oldHighlightItem->isSelected()) oldHighlightItem->setIcon(oldHighlightItem->mIcon);
23.        if(theHighlightItem && !theHighlightItem->isSelected()) theHighlightItem->setIcon(theHighlightItem->mIconHover);
24.     }
25. }
27. /**
28. * 鼠标按下（这个可以当做item的点击事件，可以正常执行）
29. * @brief MainListView::mousePressEvent
30. * @param event
31. */
32. void MainListView::mousePressEvent(QMouseEvent *event){
33.     if(event->buttons()&Qt::LeftButton){
34.         startPoint = event->pos();
35.         MainListViewItem *item = static_cast<MainListViewItem *>(itemAt(event->pos()));
36.         QString filePath = QFileDialog::getOpenFileName(this, tr("选择视频"), "C:\\Users\\wei.yang\\Downloads\\opencv_res", tr("Image Files(*.jpg *.png)"));
37.         const char *fileRealPath = filePath.toStdString().c_str();//将QString转换为char*
38.         qDebug() <<item->text()<<"--->"<<fileRealPath<<"--->pos:"<<item->mPos;
39.         switch (item->mPos) {
40.         case 1://显示原图
41.             option->showSrcImage(fileRealPath);
42.             break;
43.         case 2://像素取反
44.             option->pixleReverse(fileRealPath);
45.             break;
46.         case 3://图像交融
47.             option->imageFuse("","");
48.             break;
49.         case 4://调整图像亮度及对比度
50.             option->increaseBrightnessContrastRatio(fileRealPath);
51.             break;
52.         case 5://绘制线、矩形、椭圆、圆、多边形、文本
53.             option->drawShape();
54.             break;
55.         case 6://均值模糊：用于图像的降噪
56.             option->showBlur(fileRealPath);
57.             break;
58.         case 7://高斯模糊：用于图像的降噪，其对自然界的噪声有很好的抑制作用
59.             option->showGaussianBlue(fileRealPath);
60.             break;
61.         case 8://中值滤波：终止滤波用于图像的降噪，其对椒盐噪声有很好的抑制作用（黑白点）
62.             option->showMediaBlur(fileRealPath);
63.             break;
64.         case 9://双边滤波：其可以很好的保留边缘的同时对平坦区域停止降噪
65.             option->showBilateralFilter(fileRealPath);
66.             break;
67.         case 10://提起图像中的英文字母
68.              option->showCleanImage(fileRealPath);
69.             break;
70.         case 11://形态学开操作
71.             option->showImageOpen(fileRealPath);
72.             break;
73.         case 12:// 形态学闭操作
74.             option->showImageClose(fileRealPath);
75.             break;
76.         case 13://形态学梯度（根本梯度）：膨胀减去腐蚀
77.              option->showMorphologicalGradient(fileRealPath);
78.             break;
79.         case 14://顶帽操作：相当于原图像与开操作之间的差值图像
80.              option->showTopHat(fileRealPath);
81.             break;
82.         case 15://黑帽操作：相当于原图像与闭操作之间的差值图像
83.              option->showBlackHat(fileRealPath);
84.             break;
85.         case 16://小案例：提取提取项目中的字母或者直线
86.              option->showLines(fileRealPath,0);
87.             break;
88.         case 17://上采样:利用拉普拉斯金字塔停止图像重建
89.             option->showPyrUp(fileRealPath);
90.             break;
91.         case 18://降采样：利用高斯金字塔停止降采样
92.              option->showPyrDown(fileRealPath);
93.             break;
94.         case 19://高斯不同：把同一张图片再不同的参数下做高斯模糊之后的结果相减，得到的输出图像称为高斯不同
95.             option->showGaussianDiff(fileRealPath);
96.             break;
97.         case 20://使用自定义卷积核filter2D
98.              option->showCustomKernelFilter2D(fileRealPath,1);
99.             break;
100.         case 21://1.合并rebort和sobel的x方向梯度和y方向的梯度
101.              option->showCustomKernelFilter2DMergeXY(fileRealPath);
102.             break;
103.         case 22://填充图像边缘
104.             option->showCopyMakeBorder(fileRealPath);
105.             break;
106.         case 23://使用Sobel和Scharr计算图形梯度
107.             option->showSobelAndScharr(fileRealPath);
108.             break;
109.         case 24://使用拉普拉斯算子显示梯度图像
110.              option->showLaplacian(fileRealPath);
111.             break;
112.         case 25://边缘检测
113.             option->showCanny(fileRealPath);
114.             break;
115.         }
116.     }
117. }
119. /**
120. * 释放鼠标
121. * @brief MainListView::mouseReleaseEvent
122. * @param event
123. */
124. void MainListView::mouseReleaseEvent(QMouseEvent *event){
125.     //假设鼠标释放位置和单击位置相距超越5像素，则不会触发item选中
126.     if((event->pos() - startPoint).manhattanLength() > 5) return;
127.     MainListViewItem *item = static_cast<MainListViewItem *>(itemAt(event->pos()));
128.     setCurrentItem(item);
130. }
131. /**
132. * 处置鼠标分开后，hover图标回复正常状态
133. * @brief MainListView::leaveEvent
134. * @param event
135. */
136. void MainListView::leaveEvent(QEvent *event){
137.     Q_UNUSED(event);
138.     oldHighlightItem = theHighlightItem;
139.     if(oldHighlightItem && !oldHighlightItem->isSelected()) oldHighlightItem->setIcon(oldHighlightItem->mIcon);
140.     oldHighlightItem = theHighlightItem = nullptr;
142. }
144. void MainListView::updateSelectedIcon(){
145.     oldSelectedItem = theSelectedItem;
146.     theSelectedItem = static_cast<MainListViewItem *>(currentItem());
148.     //之前被选中的item图标回复原样
149.     //新被选中的item图标变成hover状态
150.     if(oldSelectedItem != theSelectedItem){
151.         if(oldSelectedItem) oldSelectedItem->setIcon(oldSelectedItem->mIcon);
152.         if(theSelectedItem) theSelectedItem->setIcon(theSelectedItem->mIconHover);
153.     }
154. }
156. //这个槽函数并没有执行
157. void MainListView::onMainItemClick(QListWidgetItem *item){
158.     qDebug() << "点击了item的项目";
159. }

复制代码

2.自定义QListWidgetItem

mainlistviewitem.h

1. class MainListViewItem : public QListWidgetItem
2. {
3.      //Q_OBJECT  //由于QListWidgetItem没有QObject属性，所以Q_OBJECT需要注释掉
4. public:
5.     explicit MainListViewItem(QString itemTitle,const QIcon &icon, const QIcon &iconHover,int pos,QListWidget *parent = nullptr);
6.     /**
7.      * 设置item的图标
8.      * @brief setItemIcon
9.      * @param icon
10.      * @param iconHover
11.      */
12. //    void setItemIcon(const QIcon &icon,const QIcon &iconHover);
13. public:
14.     QIcon mIcon;//默认图标
15.     QIcon mIconHover;//选中时图标
16.     int mPos;//第一个编辑
18. signals:
20. };

复制代码

mainlistviewitem.cpp

1. #include "mainlistviewitem.h"
3. /**
4. * 自定义主页ListView的Item项
5. * @brief MainListViewItem::MainListViewItem
6. * @param parent
7. */
8. MainListViewItem::MainListViewItem(QString itemTitle,const QIcon &icon, const QIcon &iconHover,int pos,QListWidget *parent) : QListWidgetItem(parent)
9. {
10.     setText(itemTitle);
11.     mIcon = icon;
12.     mIconHover = iconHover;
13.     setIcon(mIcon);
14.     setSizeHint(QSize(360,47));
15.     mPos = pos;
16. }

复制代码

3.使用

1. void MainWindow::createListView(QWidget *parent){
2.     listView = new MainListView(this);
3.     listView->setFocusPolicy(Qt::NoFocus);  //这样可禁用tab键和上下方向键并且除去复选框
4.     listView->setFixedHeight(320);
5.     listView->setFont(QFont("宋体", 14, QFont::DemiBold));
6.     listView->setFixedSize(QSize(360,480));
7.     listView->move(0,menuBar()->height());
8.     listView->setStyleSheet(
9.                 "{outline:0px;}"  //除去复选框
10.                 "MainListViewItem{background:rgb(245, 245, 247); border:0px; margin:0px 0px 0px 0px;}"
11.                 "MainListViewItem::Item{height:40px; border:0px; padding-left:14px; color:rgba(200, 40, 40, 255);}"
12.                 "MainListViewItem::Item:hover{color:rgba(40, 40, 200, 255);}"
13.                 "MainListViewItem::Item:selected{background:rgb(230, 231, 234); color:rgba(40, 40, 200, 255); border-left:4px solid rgb(180, 0, 0);}"
14.                 "QListWidget::Item:selected:active{background:rgb(230, 231, 234); color:rgba(40, 40, 200, 255); border-left:4px solid rgb(180, 0, 0);}");
16.     new MainListViewItem("显示原图",QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),1,listView);
17.     new MainListViewItem(tr("像素取反"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),2,listView);
18.     new MainListViewItem(tr("图像交融"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),3,listView);
19.     new MainListViewItem(tr("调整图像亮度及对比度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),4,listView);
20.     new MainListViewItem(tr("绘制线、矩形、椭圆、圆、多边形、文本"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),5,listView);
21.     new MainListViewItem(tr("均值模糊"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),6,listView);
22.     new MainListViewItem(tr("高斯模糊"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),7,listView);
23.     new MainListViewItem(tr("中值滤波"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),8,listView);
24.     new MainListViewItem(tr("双边滤波"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),9,listView);
25.     new MainListViewItem(tr("提取图像中的英文字母"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),10,listView);
26.     new MainListViewItem(tr("形态学开操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),11,listView);
27.     new MainListViewItem(tr("形态学闭操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),12,listView);
28.     new MainListViewItem(tr("形态学梯度（根本梯度）"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),13,listView);
29.     new MainListViewItem(tr("顶帽操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),14,listView);
30.     new MainListViewItem(tr("黑帽操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),15,listView);
31.     new MainListViewItem(tr("小案例：提取提取项目中的字母或者直线"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),16,listView);
32.     new MainListViewItem(tr("上采样"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),17,listView);
33.     new MainListViewItem(tr("降采样"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),18,listView);
34.     new MainListViewItem(tr("高斯不同"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),19,listView);
35.     new MainListViewItem(tr("使用自定义卷积核filter2D"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),20,listView);
36.     new MainListViewItem(tr("合并rebort及Sobel的x方向梯度和y方向的梯度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),21,listView);
37.     new MainListViewItem(tr("填充图像边缘"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),22,listView);
38.     new MainListViewItem(tr("使用Sobel和Scharr计算图形梯度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),23,listView);
39.     new MainListViewItem(tr("使用拉普拉斯算子显示梯度图像"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),24,listView);
40.     new MainListViewItem(tr("边缘检测"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),25,listView);
42. //    connect(listView,&MainListView::itemClicked,listView,&MainListView::onMainItemClick);
43. }
44. //最后一步：创建ListView，然后运行就行了
45. createListView(this);

复制代码

3、图片演示

到此这篇关于QT实现制作一个ListView列表的示例代码的文章就介绍到这了,更多相关QT制作ListView列表内容请搜索网站以前的文章或继续阅读下面的相关文章希望大家以后多多支持网站！