本文写作纯属个人兴趣使然,界面没有美化什么,纯属学习之用,如果有当之处,还请大家海涵,进入正题。
本文主要讲述了利用Qt5实现类似QQ好友列表中,当鼠标悬停在头像上面时弹出QQ好友信息的功能,总共包括2个部分,其一列表显示部分(显示QQ好友,包括头像、姓名、简要概述),其二CToolTip部分,用于显示当前用户的信息,话不多说,直接上代码和图
QQ好友条信息显示部分:
这个功能其实网上有相关的资料的,直接上代码吧:ItemWidget.h
#ifndef ITEMWIDGET_H #define ITEMWIDGET_H #include <QWidget> #include <QLabel> #include <QPushButton> #include <QVBoxLayout> #include <QHBoxLayout> //class CLabel; class ItemWidget : public QWidget { Q_OBJECT public: explicit ItemWidget(QWidget *parent = 0); void setText(QPixmap pixmap, QString name, QString info); void setText(QString info); signals: public slots: private: QLabel *labelIcon; QLabel *labelName; QLabel *labelInfo; QHBoxLayout *horLayout; QVBoxLayout *verlayout; protected: bool event(QEvent *e); }; #endif // ITEMWIDGET_HItemWidget.cpp
#include "itemwidget.h" #include "global.h" #include "ctooltip.h" #include <QEvent> #include <QCursor> ItemWidget::ItemWidget(QWidget *parent) : QWidget(parent) { labelIcon = new QLabel(this); labelName = new QLabel(this); labelName->setStyleSheet("QLabel{color: green; font: 13pt bold;}"); labelInfo = new QLabel(this); labelInfo->setStyleSheet("QLabel{color: gray;}"); verlayout = new QVBoxLayout(); verlayout->setContentsMargins(0, 0, 0, 0); verlayout->addWidget(labelName); verlayout->addWidget(labelInfo); horLayout = new QHBoxLayout(this); horLayout->setContentsMargins(2, 2, 2, 2); horLayout->addWidget(labelIcon, 1, Qt::AlignTop); horLayout->addLayout(verlayout, 4); } void ItemWidget::setText(QPixmap pixmap, QString name, QString info) { labelIcon->setPixmap(pixmap); labelName->setText(name); labelInfo->setText(info); } // 测试用的 void ItemWidget::setText(QString info) { labelIcon->setText(info); } // 鼠标悬停的时候,显示当前用户简要信息 bool ItemWidget::event(QEvent *e) { if (e->type() == QEvent::ToolTip) { qDebug() << "tool tip show"; g_toolTip->showMessage(labelIcon->pixmap(), labelName->text(), labelInfo->text(), QCursor::pos()); } else if (e->type() == QEvent::Leave) { qDebug() << "tool tip leave"; g_toolTip->hide(); } return QWidget::event(e); }然后是CToolTip自定义样式部分:.h
#ifndef CTOOLTIP_H #define CTOOLTIP_H #include <QWidget> #include <QLabel> #include <QPushButton> #include <QGroupBox> #include <QVBoxLayout> #include <QHBoxLayout> class CToolTip : public QWidget { Q_OBJECT public: explicit CToolTip(QWidget *parent = 0); void showMessage(const QPixmap *pixmap, QString name, QString info, QPoint point); void showMessage(const QPixmap *pixmap, QPoint point); signals: public slots: private: QLabel *labelIcon; QLabel *labelName; QLabel *labelInfo; QHBoxLayout *horLayout; QVBoxLayout *verlayout; QGroupBox *groupBox; protected: void hoverEvent(QHoverEvent *); }; #endif // CTOOLTIP_H
#include "ctooltip.h" #include <QDebug> #include <QApplication> #include <QDesktopWidget> CToolTip::CToolTip(QWidget *parent) : QWidget(parent) { this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint); this->resize(200, 100); ; this->setObjectName("CToolTip"); this->setStyleSheet("QWidget#CToolTip {border: 2px solid green; background-color: skyblue;}"); groupBox = new QGroupBox(this); groupBox->setGeometry(10, 10, 180, 80); groupBox->setTitle("用户信息"); labelIcon = new QLabel(groupBox); labelName = new QLabel(groupBox); labelInfo = new QLabel(groupBox); verlayout = new QVBoxLayout(); verlayout->setContentsMargins(0, 0, 0, 0); verlayout->addWidget(labelName); verlayout->addWidget(labelInfo); horLayout = new QHBoxLayout(groupBox); horLayout->setContentsMargins(10, 10, 10, 10); horLayout->addWidget(labelIcon, 1, Qt::AlignTop); horLayout->addLayout(verlayout, 4); } // 显示ToolTip消息 void CToolTip::showMessage(const QPixmap *pixmap, QString name, QString info, QPoint point) { labelIcon->setPixmap(*pixmap); labelName->setText(name); labelInfo->setText(info); // 重新定义CToolTip的坐标 int rectX; int rectY; if (point.rx() < 200) { rectX = point.rx() + 10; } else { rectX = point.rx() - 240; } rectY = point.ry(); move(QPoint(rectX, rectY)); QWidget::show(); } // 显示ToolTip消息 void CToolTip::showMessage(const QPixmap *pixmap, QPoint point) { labelIcon->setPixmap(*pixmap); labelName->setText("自己想办法获取"); labelInfo->setText("自己动手,丰衣足食"); // 此处可以作为QToolTip样式进行显示 move(point); QWidget::show(); } // 当鼠标进入事件时,让界面隐藏掉 void CToolTip::hoverEvent(QHoverEvent *) { hide(); }// 最后一个组合界面,mainWidget.h
#ifndef MAINWIDGET_H #define MAINWIDGET_H #include <QWidget> class CToolTip; namespace Ui { class MainWidget; } class MainWidget : public QWidget { Q_OBJECT public: explicit MainWidget(QWidget *parent = 0); ~MainWidget(); private: Ui::MainWidget *ui; CToolTip *ctoolTip; }; #endif // MAINWIDGET_H
#include "mainwidget.h" #include "ui_mainwidget.h" #include "itemwidget.h" #include "ctooltip.h" #include <QListWidgetItem> CToolTip *g_toolTip; MainWidget::MainWidget(QWidget *parent) : QWidget(parent), ui(new Ui::MainWidget) { // this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint); ui->setupUi(this); ctoolTip = new CToolTip(); // 定义全局的ToolTip,方便使用 g_toolTip = ctoolTip; // 本行代码主要针对ListWidgetItem右键点击时才生效的 ui->listWidget->setMouseTracking(true); // 添加测试数据 for (int i = 0; i < 10; i++) { ItemWidget *itemWidget = new ItemWidget(ui->listWidget); itemWidget->setText(QPixmap(QString(":/images/%1").arg(i+1)), QString("标题"), QString("写点什么呢: %1?").arg(i)); QListWidgetItem *listItem = new QListWidgetItem(ui->listWidget); // 此处的size如果不设置,界面被压缩了看不出ItemWidget的效果,高度一定要设置 listItem->setSizeHint(QSize(200, 40)); ui->listWidget->setItemWidget(listItem, itemWidget); } } MainWidget::~MainWidget() { delete ui; }
最后给大家上一个效果
代码下载地址:http://pan.baidu.com/s/1eQvk2R4