QListView自定义Item

前言

要实现的效果类似网易云PC客户端本地音乐页面的效果：

效果图：

实现

QListWidget和QListView都能实现，先说一下两者的区别吧，QListWidget和QListView的主要区别在于QListView是基于Model，而QListWidget是基于Item，QListWidget继承于QListView。也就是说QListWidget插入数据的话我们只能通过 addItem 这个方法来实现，QListView插入数据的话我们是往model里面插入数据，而且我们还可以自定义自己的model，易于扩展，降低了数据冗余，提高了程序的效率。

实现方法大概有这么三种：

如果使用QListWidget的话，我们直接调用 setItemWidget 即可。

 void setItemWidget(QListWidgetItem *item, QWidget *widget)

QListWidget和QListView都可以通过调用 setIndexWidget 实现。但是该方法只适合做静态数据的显示，不适合做一些插入、更新、删除操作的数据显示。

 void QAbstractItemView::setIndexWidget(const QModelIndex &index, QWidget *widget)

我们针对QListView实现自己的ItemDelegate。本文就是采用该种方法，重写ItemDelegate的paint函数。

首先实现自己要显示的数据结构体，需要用到Q_DECLARE_METATYPE宏

#include <QMetaType>typedef struct {QString iconPath;QString singer;QString songsNb;
} MuItemData;Q_DECLARE_METATYPE(MuItemData)

item的大小通过sizeHint函数设置：

QSize MuItemDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{Q_UNUSED(index)return QSize(option.rect.width(), 50);
}

重写paint函数：

void MuItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{if (index.isValid()) {painter->save();QVariant var = index.data(Qt::UserRole+1);MuItemData itemData = var.value<MuItemData>();// item 矩形区域QRectF rect;rect.setX(option.rect.x());rect.setY(option.rect.y());rect.setWidth(option.rect.width()-1);rect.setHeight(option.rect.height()-1);QPainterPath path;path.moveTo(rect.topRight());path.lineTo(rect.topLeft());path.quadTo(rect.topLeft(), rect.topLeft());path.lineTo(rect.bottomLeft());path.quadTo(rect.bottomLeft(), rect.bottomLeft());path.lineTo(rect.bottomRight());path.quadTo(rect.bottomRight(), rect.bottomRight());path.lineTo(rect.topRight());path.quadTo(rect.topRight(), rect.topRight());// 鼠标悬停或者选中时改变背景色if (option.state.testFlag(QStyle::State_MouseOver)) {painter->setPen(QPen(QColor("#ebeced")));painter->setBrush(QColor("#ebeced"));painter->drawPath(path);}if (option.state.testFlag(QStyle::State_Selected)) {painter->setPen(QPen(QColor("#e3e3e5")));painter->setBrush(QColor("#e3e3e5"));painter->drawPath(path);}// 绘制图片，歌手，数量位置区域QRectF iconRect = QRect(rect.left()+5, rect.top()+5, 40, 40);QRectF singerRect = QRect(iconRect.right()+5, iconRect.top(), rect.width()-10-iconRect.width(), 20);QRectF songNbRect = QRect(singerRect.left(), singerRect.bottom()+5, rect.width()-10-iconRect.width(), 20);painter->drawImage(iconRect, QImage(itemData.iconPath));painter->setPen(QPen(Qt::black));painter->setFont(QFont("Microsoft Yahei", 10));painter->drawText(singerRect, itemData.singer);painter->setPen(QPen(Qt::gray));painter->drawText(songNbRect, itemData.songsNb);painter->restore();}
}

插入数据：

#include <QStandardItemModel>
#include <QObject>
#include "Widget.h"
#include "ui_Widget.h"
#include "MuListItemData.h"
#include "MuItemDelegate.h"const QStringList icons = {":/images/HotDog.jpg", ":/images/li.jpg", ":/images/logo.jpg",":/images/PACT.jpg", ":/images/yang.jpg", ":/images/zhang.jpg",
};
const QStringList singers = {"MC-Hotdog", "李荣浩", "Author","PACT", "杨千嬅", "张震岳",
};Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);QStandardItemModel *pModel = new QStandardItemModel();for (int i=0; i<icons.size(); ++i) {QStandardItem *pItem = new QStandardItem;MuItemData itemData;itemData.singer = singers.at(i);itemData.songsNb = QString::number(i * i) + "首";itemData.iconPath = icons.at(i);pItem->setData(QVariant::fromValue(itemData), Qt::UserRole+1);pModel->appendRow(pItem);}MuItemDelegate *pItemDelegate = new MuItemDelegate(this);ui->listView->setItemDelegate(pItemDelegate);ui->listView->setModel(pModel);
}Widget::~Widget()
{delete ui;
}

代码下载：

CSDN： https://download.csdn.net/download/a844651990/10798713
GitHub: https://github.com/FlyWM/MuListView

QListView自定义Item相关推荐

Qt实现QListView自定义Item界面——仿QQ好友界面
一直都认为,用最通俗的语言,讲解最深刻的技术,是每一个技术交流者应该考虑的事情,今天朋友问我,好友列表该怎么实现.我想起之前上网查阅的时候,发现网上介绍这块的内容甚少,而且讲解的不够好,于是,本着互相 ...
Zabbix 自定义Item经常Not Supported解决
Zabbix 自定义Item经常Not Supported解决大家在使用Zabbix的时候往往会自定义Item.但是经常会遇到自定义的Item动不动就Not Supported了.其实原因很简单.Z ...
QT 如何去除QListView选中item后的虚线框
在使用QListView或者QListWidget时,如果选中其item,会发现边框会出现虚线框,这并不美观!所以,我们需要去掉选中后的虚线框.在查阅各路大神的实现方式后,总结了有三种方法可以去除虚线 ...
QListWidget详细使用教程：图标列表显示、右键菜单、自定义item
目录一.QListWidget的显示模式二.QList item右键菜单三.添加自定义Item 一.QListWidget的显示模式 QListWidget有两种显示模式,列表模式与图标模式,Q ...
android自定义item大小,Android GridView Item平分宽度
GridVIew设置numColumns以及stretchMode 并且宽度必须为match_parent,Item设置columnWeight="1",就可实现平分 GridVI ...
基于Qt的仿酷狗音乐播放器设计（二）
简述在上一文"基于Qt的仿酷狗音乐播放器设计(一)"中,博主给出了仿酷狗界面的部分内容,在本文中将继续分析酷狗界面,并作出相应的分析. 下面我们来看一下酷狗界面中的左侧滑动页控制 ...
开源项目推荐：本人收集的有关Qt的GitHub/Gitee开源项目(★精品收藏★)
尊重作者,支持原创,如需转载,请附上原地址:开源项目推荐:Qt有关的GitHub/Gitee开源项目(★精品收藏★)_$firecat全宏的代码足迹$-CSDN博客_qt开源项目https://lib ...
C++ | Qt 实现自定义QListWidgetItem效果
目录一.使用Qt自带QListWidgetItem 1.使用方式 2.效果二. 自定义Item 1.效果 2.实现三.补充[2021/08/30] 一.使用Qt自带QListWidgetItem ...
recyclerview item 点击有背景_如何用RecyclerView实现猫眼电影选择效果
一.简介在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView.除了最普通的列表显示,RecyclerView还可以其他的很多效果,例如Banner等.在最近的 ...
SharePoint配置和自定义Content Query Web Part
今天逛博客,突然看到一篇好文章,这里就做个记录,哈哈~~虽然之前也对content query web part 操作过... 自定义前: 虽然把数据读取出来了,但是如何自定义item的布局和样式来满 ...

QListView自定义Item

前言

实现

代码下载：

QListView自定义Item相关推荐

最新文章

热门文章