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

2024-09-29 21:47:06

1、概述

案例：使用Qt制作一个ListView。点击ListView的Item可以用于测试OpenCV的各种效果

自定义一个：MainListView继承QListWidget 、MainListViewItem继承QListWidgetItem

2、代码示例

1.自定义QListWidget

mainlistview.h

class MainListView : public QListWidget
{
    Q_OBJECT
public:
    explicit MainListView(QWidget *parent = nullptr);
protected:
    void mousePressEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void leaveEvent(QEvent *event);
private:
    QPoint startPoint;
    MainListViewItem *theHighlightItem = nullptr;
    MainListViewItem *oldHighlightItem = nullptr;
    MainListViewItem *theSelectedItem = nullptr;
    MainListViewItem *oldSelectedItem = nullptr;
    Chapter3Option * option = new Chapter3Option();

signals:

public slots:
    void updateSelectedIcon();
    void onMainItemClick(QListWidgetItem *item);
};

mainlistview.cpp

#include "mainlistview.h"

MainListView::MainListView(QWidget *parent) : QListWidget(parent)
{
    setMouseTracking(true);
    //连接信号与槽函数，如果选中项发生变化则触发item图标的更新.都是当前对象发生
    connect(this,&MainListView::itemSelectionChanged,this,&MainListView::updateSelectedIcon);
    connect(this,&MainListView::itemClicked,this,&MainListView::onMainItemClick);
}

/**
 * 处理鼠标hove事件，item图标就变成hove状态
 * @brief MainListView::mouseMoveEvent
 * @param event
 */
void MainListView::mouseMoveEvent(QMouseEvent *event){
    oldHighlightItem = theHighlightItem;
    theHighlightItem = static_cast<MainListViewItem *>(itemAt(event->pos()));
    //旧的hover的item图标回复原状(条件是该item没有被选中)
    //新的hover的iten图标变成hover状态(条件是该item没有被选中)
    if(oldHighlightItem != theHighlightItem){
       if(oldHighlightItem && !oldHighlightItem->isSelected()) oldHighlightItem->setIcon(oldHighlightItem->mIcon);
       if(theHighlightItem && !theHighlightItem->isSelected()) theHighlightItem->setIcon(theHighlightItem->mIconHover);
    }
}

/**
 * 鼠标按下（这个可以当做item的点击事件，能够正常执行）
 * @brief MainListView::mousePressEvent
 * @param event
 */
void MainListView::mousePressEvent(QMouseEvent *event){
    if(event->buttons()&Qt::LeftButton){
        startPoint = event->pos();
        MainListViewItem *item = static_cast<MainListViewItem *>(itemAt(event->pos()));
        QString filePath = QFileDialog::getOpenFileName(this, tr("选择视频"), "C:\\Users\\wei.yang\\Downloads\\opencv_res", tr("Image Files(*.jpg *.png)"));
        const char *fileRealPath = filePath.toStdString().c_str();//将QString转换为char*
        qDebug() <<item->text()<<"--->"<<fileRealPath<<"--->pos:"<<item->mPos;
        switch (item->mPos) {
        case 1://显示原图
            option->showSrcImage(fileRealPath);
            break;
        case 2://像素取反
            option->pixleReverse(fileRealPath);
            break;
        case 3://图像融合
            option->imageFuse("","");
            break;
        case 4://调整图像亮度及对比度
            option->increaseBrightnessContrastRatio(fileRealPath);
            break;
        case 5://绘制线、矩形、椭圆、圆、多边形、文本
            option->drawShape();
            break;
        case 6://均值模糊：用于图像的降噪
            option->showBlur(fileRealPath);
            break;
        case 7://高斯模糊：用于图像的降噪，其对自然界的噪声有很好的抑制作用
            option->showGaussianBlue(fileRealPath);
            break;
        case 8://中值滤波：终止滤波用于图像的降噪，其对椒盐噪声有很好的抑制作用（黑白点）
            option->showMediaBlur(fileRealPath);
            break;
        case 9://双边滤波：其可以很好的保留边缘的同时对平坦区域进行降噪
            option->showBilateralFilter(fileRealPath);
            break;
        case 10://提起图像中的英文字母
             option->showCleanImage(fileRealPath);
            break;
        case 11://形态学开操作
            option->showImageOpen(fileRealPath);
            break;
        case 12:// 形态学闭操作
            option->showImageClose(fileRealPath);
            break;
        case 13://形态学梯度（基本梯度）：膨胀减去腐蚀
             option->showMorphologicalGradient(fileRealPath);
            break;
        case 14://顶帽操作：相当于原图像与开操作之间的差值图像
             option->showTopHat(fileRealPath);
            break;
        case 15://黑帽操作：相当于原图像与闭操作之间的差值图像
             option->showBlackHat(fileRealPath);
            break;
        case 16://小案例：提取提取项目中的字母或者直线
             option->showLines(fileRealPath,0);
            break;
        case 17://上采样:利用拉普拉斯金字塔进行图像重建
            option->showPyrUp(fileRealPath);
            break;
        case 18://降采样：利用高斯金字塔进行降采样
             option->showPyrDown(fileRealPath);
            break;
        case 19://高斯不同：把同一张图片再不同的参数下做高斯模糊之后的结果相减，得到的输出图像称为高斯不同
            option->showGaussianDiff(fileRealPath);
            break;
        case 20://使用自定义卷积核filter2D
             option->showCustomKernelFilter2D(fileRealPath,1);
            break;
        case 21://1.合并rebort和sobel的x方向梯度和y方向的梯度
             option->showCustomKernelFilter2DMergeXY(fileRealPath);
            break;
        case 22://填充图像边缘
            option->showCopyMakeBorder(fileRealPath);
            break;
        case 23://使用Sobel和Scharr计算图形梯度
            option->showSobelAndScharr(fileRealPath);
            break;
        case 24://使用拉普拉斯算子显示梯度图像
             option->showLaplacian(fileRealPath);
            break;
        case 25://边缘检测
            option->showCanny(fileRealPath);
            break;
        }
    }
}

/**
 * 释放鼠标
 * @brief MainListView::mouseReleaseEvent
 * @param event
 */
void MainListView::mouseReleaseEvent(QMouseEvent *event){
    //如果鼠标释放位置和单击位置相距超过5像素，则不会触发item选中
    if((event->pos() - startPoint).manhattanLength() > 5) return;
    MainListViewItem *item = static_cast<MainListViewItem *>(itemAt(event->pos()));
    setCurrentItem(item);

}
/**
 * 处理鼠标离开后，hover图标回复正常状态
 * @brief MainListView::leaveEvent
 * @param event
 */
void MainListView::leaveEvent(QEvent *event){
    Q_UNUSED(event);
    oldHighlightItem = theHighlightItem;
    if(oldHighlightItem && !oldHighlightItem->isSelected()) oldHighlightItem->setIcon(oldHighlightItem->mIcon);
    oldHighlightItem = theHighlightItem = nullptr;

}

void MainListView::updateSelectedIcon(){
    oldSelectedItem = theSelectedItem;
    theSelectedItem = static_cast<MainListViewItem *>(currentItem());

    //之前被选中的item图标回复原样
    //新被选中的item图标变成hover状态
    if(oldSelectedItem != theSelectedItem){
        if(oldSelectedItem) oldSelectedItem->setIcon(oldSelectedItem->mIcon);
        if(theSelectedItem) theSelectedItem->setIcon(theSelectedItem->mIconHover);
    }
}

//这个槽函数并没有执行
void MainListView::onMainItemClick(QListWidgetItem *item){
    qDebug() << "点击了item的项目";
}

2.自定义QListWidgetItem

mainlistviewitem.h

class MainListViewItem : public QListWidgetItem
{
     //Q_OBJECT  //由于QListWidgetItem没有QObject属性，所以Q_OBJECT需要注释掉
public:
    explicit MainListViewItem(QString itemTitle,const QIcon &icon, const QIcon &iconHover,int pos,QListWidget *parent = nullptr);
    /**
     * 设置item的图标
     * @brief setItemIcon
     * @param icon
     * @param iconHover
     */
//    void setItemIcon(const QIcon &icon,const QIcon &iconHover);
public:
    QIcon mIcon;//默认图标
    QIcon mIconHover;//选中时图标
    int mPos;//第一个编辑

signals:

};

mainlistviewitem.cpp

#include "mainlistviewitem.h"

/**
 * 自定义主页ListView的Item项
 * @brief MainListViewItem::MainListViewItem
 * @param parent
 */
MainListViewItem::MainListViewItem(QString itemTitle,const QIcon &icon, const QIcon &iconHover,int pos,QListWidget *parent) : QListWidgetItem(parent)
{
    setText(itemTitle);
    mIcon = icon;
    mIconHover = iconHover;
    setIcon(mIcon);
    setSizeHint(QSize(360,47));
    mPos = pos;
}

3.使用

void MainWindow::createListView(QWidget *parent){
    listView = new MainListView(this);
    listView->setFocusPolicy(Qt::NoFocus);  //这样可禁用tab键和上下方向键并且除去复选框
    listView->setFixedHeight(320);
    listView->setFont(QFont("宋体", 14, QFont::DemiBold));
    listView->setFixedSize(QSize(360,480));
    listView->move(0,menuBar()->height());
    listView->setStyleSheet(
                "{outline:0px;}"  //除去复选框
                "MainListViewItem{background:rgb(245, 245, 247); border:0px; margin:0px 0px 0px 0px;}"
                "MainListViewItem::Item{height:40px; border:0px; padding-left:14px; color:rgba(200, 40, 40, 255);}"
                "MainListViewItem::Item:hover{color:rgba(40, 40, 200, 255);}"
                "MainListViewItem::Item:selected{background:rgb(230, 231, 234); color:rgba(40, 40, 200, 255); border-left:4px solid rgb(180, 0, 0);}"
                "QListWidget::Item:selected:active{background:rgb(230, 231, 234); color:rgba(40, 40, 200, 255); border-left:4px solid rgb(180, 0, 0);}");

    new MainListViewItem("显示原图",QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),1,listView);
    new MainListViewItem(tr("像素取反"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),2,listView);
    new MainListViewItem(tr("图像融合"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),3,listView);
    new MainListViewItem(tr("调整图像亮度及对比度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),4,listView);
    new MainListViewItem(tr("绘制线、矩形、椭圆、圆、多边形、文本"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),5,listView);
    new MainListViewItem(tr("均值模糊"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),6,listView);
    new MainListViewItem(tr("高斯模糊"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),7,listView);
    new MainListViewItem(tr("中值滤波"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),8,listView);
    new MainListViewItem(tr("双边滤波"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),9,listView);
    new MainListViewItem(tr("提取图像中的英文字母"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),10,listView);
    new MainListViewItem(tr("形态学开操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),11,listView);
    new MainListViewItem(tr("形态学闭操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),12,listView);
    new MainListViewItem(tr("形态学梯度（基本梯度）"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),13,listView);
    new MainListViewItem(tr("顶帽操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),14,listView);
    new MainListViewItem(tr("黑帽操作"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),15,listView);
    new MainListViewItem(tr("小案例：提取提取项目中的字母或者直线"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),16,listView);
    new MainListViewItem(tr("上采样"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),17,listView);
    new MainListViewItem(tr("降采样"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),18,listView);
    new MainListViewItem(tr("高斯不同"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),19,listView);
    new MainListViewItem(tr("使用自定义卷积核filter2D"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),20,listView);
    new MainListViewItem(tr("合并rebort及Sobel的x方向梯度和y方向的梯度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),21,listView);
    new MainListViewItem(tr("填充图像边缘"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),22,listView);
    new MainListViewItem(tr("使用Sobel和Scharr计算图形梯度"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),23,listView);
    new MainListViewItem(tr("使用拉普拉斯算子显示梯度图像"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),24,listView);
    new MainListViewItem(tr("边缘检测"),QIcon(":res/icon_main_list.png"),QIcon(":res/icon_main_list.png"),25,listView);

//    connect(listView,&MainListView::itemClicked,listView,&MainListView::onMainItemClick);
}
//最后一步：创建ListView，然后运行就行了
 createListView(this);

3、图片演示

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

PyQt5 QListView 高亮显示某一条目的案例

正在做的项目遇到的问题 , 在缩略图列表中选择某一图,同时关联到图片list里高亮显示这个图片名字. 一开始我直接用setCurrentIndex(int) 来设置 if msg == "CAM1_Label_1": self.showCamOnTopScreen(0) self.device_listView.setCurrentIndex(0) 结果报错,提示 "setCurrentIndex(self, QModelIndex): argument 1 has unex
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

1.视图模型介绍在Qml中.常见的View视图有: ListView: 列表视图,视图中数据来自ListModel.XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类 TableView: 和excel类似的视图 GridView: 网格视图,类似于home菜单那样,排列着一个个app小图标 PathView: 路径视图,可以根据用户自定义的path路径来显示不一样的视图效果 SwipeView: 滑动视图,使用一组
Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）

Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro
pyqt5 QlistView列表显示的实现示例

1.简介 QlistView类用于展示数据,它的子类是QListWIdget.QListView是基于模型(Model)的,需要程序来建立模型,然后再保存数据 QListWidget是一个升级版本的QListView,它已经建立了一个数据储存模型(QListWidgetItem),直接调用addItem()函数,就可以添加条目(Item) QListView类中常用的方法如表方法描述 setModel() 用来设置View所关联的Model,可以使用Python原生的list作为数据源Mod
QT实现制作一个ListView列表的示例代码

目录 1.概述 2.代码示例 1.自定义QListWidget 2.自定义QListWidgetItem 3.使用 3.图片演示 1.概述案例:使用Qt制作一个ListView.点击ListView的Item可以用于测试OpenCV的各种效果自定义一个:MainListView继承QListWidget .MainListViewItem继承QListWidgetItem 2.代码示例 1.自定义QListWidget mainlistview.h class MainListView :
使用JavaScript制作待办事项列表的示例代码

目录 JavaScript待办事项列表如何制作JavaScript待办事项列表第 1 步: 项目的基本结构第 2 步: 使用 HTML 创建一个输入位置第 3 步: 制作查看 Todo 文本的列表第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.
Android ItemDecoration 实现分组索引列表的示例代码

本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继
使用Vue3实现一个Upload组件的示例代码

通用上传组件开发开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave文件离开拖动区域 drop文件移动到有效目标时首先实现一个最基本的上传流程: 基本上传流程,点击按钮选择,完成上传代码如下: <template> <div class="app-container">  <input type="file" @ch
python实现合并两个有序列表的示例代码

题目描述将两个升序链表合并为一个新的升序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. LeetCode原题地址:https://leetcode-cn.com/problems/merge-two-sorted-lists/ 测试用例示例1 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3,4,4] 示例2 输入:l1 = [], l2 = [] 输出:[] 示例3 输入:l1 = [], l2 = [0] 输出:[0] 代码详解因为Lee
Qt编写地图实现闪烁点图的示例代码

目录一.前言二.功能特点三.体验地址四.效果图五.相关代码一.前言 Qt作为一个超大型的一站式GUI超市开发集成环境,不仅集成了大量的可视化UI组件,还提供了网络库.数据库操作.文件操作等类库,封装的还是相当精彩一步到位,根据个人身边的一些程序员朋友了解,自从用了Qt以来发现越来越喜欢用Qt本身的类来处理,除非一些要求很高的应用场景比如并发网络才需要去使用第三方库,不然就是直接使用Qt封装好的类,用起来非常爽,尤其是类的名称和方法的名称,几乎很自然的就能打出来. Qt除了内置了各种U
QT编写地图实现设备点位的示例代码

目录一.前言二.功能特点三.体验地址四.效果图五.相关代码一.前言在学习JS语法的时候发现其实程序都大同小异,正所谓一通百通,熟悉各大概的语法以后基本都可以上手,和C++最大的不同就是他没有数据类型的概念,作为解释性的语言,是在执行的时候自动去转换数据类型,工作都交给解释器做掉了,这样就大大方便了程序员,到处var即可,哪怕是数组啊对象啊,万物皆var,只有当真正赋值的时候,才知道具体的数据类型. 在地图应用的相关项目中,在地图上标识一些设备点,并对点进行交互这个功能用的最多的,于
Qt实现数据导出到xls的示例代码

目录一.前言二.功能特点三.体验地址四.效果图五.相关代码一.前言导入导出数据到csv由于语法简单,适用场景有限,于是乎还是必须再造一个轮子导出数据到xls,在经历过数十年的项目实战经验中不断调整和优化.尤其记得当初第一个版本v0.01大概在2011年左右完成的,当时是公司项目运行在嵌入式板子上,需要导出警情记录,拷贝到电脑上打印,由于嵌入式根本没有也不可能去安装excel等软件,硬着头皮去研究了xml格式的xls文件,按照那个规则组合成简单的导出数据,这个思路想法理论上比QtXl
QT实现年会抽奖小软件的示例代码

目录一.效果展示: 二.软件代码介绍 1.工程目录 2.核心代码之主类代码部分 3.核心代码之线程类代码部分一.效果展示: 1.操作说明下拉选择主题,点击开始按钮,开始滚动,再次点击停止,显示幸运之星及名称.中选人员不参与接下来的抽取,除非软件重启或点击复位按钮. 二.软件代码介绍 1.工程目录 2.核心代码之主类代码部分 main.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include &l
基于Qt实现简易GIF播放器的示例代码

目录一.项目介绍二.项目基本配置三.UI界面设计四.主程序实现 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件五.效果演示一.项目介绍利用Qt设计一个简易GIF播放器,可以播放GIF动画.其基本功能有载入文件.播放.暂停.停止.快进和快退. 二.项目基本配置新建一个Qt案例,项目名称为“GIFTest”,基类选择“QMainWindow”,创建UI界面复选框的选中状态,完成项目创建. 三.UI界面设计 UI界面如下: 界面中创建了8个控件,其名