Qt之使用QListView实现QQ登录历史列表

一.效果

真实效果没白色边框

二.实现

从效果图中可以看出,有以下特点:
1.悬浮滚动条
自定义半透明滚动条悬浮在Item之上,与原挤占Item宽度的滚动条效果相同
2.支持指定最大显示行数
效果图中最大支持显示三行,当删除item到只剩下三行时,滚动条自动消失
3.删除按钮有点击效果
当点击删除按钮时,删除按钮变成红色
4.popup弹窗没用阴影
通常popup弹窗是会有阴影的,如下图所示


去掉阴影的方法是添加Qt::NoDropShadowWindowHint标志

setWindowFlags(Qt::FramelessWindowHint | Qt::Popup | Qt::NoDropShadowWindowHint);

本文基于QListView、QStyledItemDelegate和QStandardItemModel
QStyledItemDelegate用于处理Item绘图和Item事件,源码如下:
QHItemDelegate.h

#ifndef QHITEMDELEGATE_H
#define QHITEMDELEGATE_H

#include <QStyledItemDelegate>
#include <QMetaType>

typed
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
借助于Qt的Model/View架构和提供的一些样例代码,我们可以很方便地用QListView实现一个简单的QQ列表。 首先,我们需要创建一个QListView对象和一个QStandardItemModel对象。这个QStandardItemModel是Qt中提供的标准的Item Model,用来提供给View提供数据。 ```C++ #include <QListView> #include <QStandardItemModel> QListView *listView = new QListView(this); QStandardItemModel *model = new QStandardItemModel(this); ``` 然后,我们可以为这个QStandardItemModel添加QQ列表中的好友信息,通过QStandardItemModel的`setItem`函数设置每个item的数据模型。 ```C++ QStandardItem *item1 = new QStandardItem("Tom"); item1->setIcon(QIcon(":/images/avatar1.png")); QStandardItem *item2 = new QStandardItem("Jack"); item2->setIcon(QIcon(":/images/avatar2.png")); QStandardItem *item3 = new QStandardItem("Lucy"); item3->setIcon(QIcon(":/images/avatar3.png")); model->appendRow(item1); model->appendRow(item2); model->appendRow(item3); ``` 接着,我们将QStandardItemModel设置为QListView的model,并设置一些样式和属性。 ```C++ listView->setModel(model); listView->setEditTriggers(QAbstractItemView::NoEditTriggers); listView->setDragDropMode(QAbstractItemView::NoDragDrop); listView->setSelectionMode(QAbstractItemView::SingleSelection); listView->setSelectionBehavior(QAbstractItemView::SelectRows); listView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); listView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); listView->setStyleSheet("border: 0; padding-left: 10px; background-color:white;"); listView->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel); listView->setUniformItemSizes(true); listView->setIconSize(QSize(36, 36)); ``` 最后,我们将这个QListView加入到窗口中进行显示。 ```C++ QVBoxLayout *layout = new QVBoxLayout(); layout->addWidget(listView); setLayout(layout); ``` 完整代码如下: ```C++ #include <QListView> #include <QStandardItemModel> #include <QVBoxLayout> class MainWindow : public QMainWindow { public: MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) { QListView *listView = new QListView(this); QStandardItemModel *model = new QStandardItemModel(this); QStandardItem *item1 = new QStandardItem("Tom"); item1->setIcon(QIcon(":/images/avatar1.png")); QStandardItem *item2 = new QStandardItem("Jack"); item2->setIcon(QIcon(":/images/avatar2.png")); QStandardItem *item3 = new QStandardItem("Lucy"); item3->setIcon(QIcon(":/images/avatar3.png")); model->appendRow(item1); model->appendRow(item2); model->appendRow(item3); listView->setModel(model); listView->setEditTriggers(QAbstractItemView::NoEditTriggers); listView->setDragDropMode(QAbstractItemView::NoDragDrop); listView->setSelectionMode(QAbstractItemView::SingleSelection); listView->setSelectionBehavior(QAbstractItemView::SelectRows); listView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); listView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); listView->setStyleSheet("border: 0; padding-left: 10px; background-color:white;"); listView->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel); listView->setUniformItemSizes(true); listView->setIconSize(QSize(36, 36)); QVBoxLayout *layout = new QVBoxLayout(); layout->addWidget(listView); setLayout(layout); } }; ``` 这样就可以通过QListView实现一个QQ列表啦!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草上爬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值