本文主要总结用Qt的自定义按钮和QWidget界面实现QQ好友列表的界面伸展和收缩功能，以及鼠标滑过、鼠标单击的QSS样式表效果。全文分为两大部分，分别是原理讲解和效果实现。
源代码下载地址：/download/naibozhuan3744/11860177
一、原理讲解
实现QQ好友列表伸缩或者抽屉效果，不是像QToolbox那样的效果，其实很简单。只需要用垂直布局将按钮和QWidget控件布局到一起，然后通过QWidget::setVisible(bool)实现QWidget界面的显示和隐藏就行。其中自定义按钮的原理讲解可以参考博主这篇博客：/naibozhuan3744/article/details/102536188
二、示例代码
2.1新建一个Widget工程，勾选UI界面，然后新建一个类QFriendListBtn，同时添加两个图片资源文件；
2.2分别向qqqfriendlistbtn.h、qqqfriendlistbtn.cpp、widget.h、widget.cpp、main.cp添加如下代码
qqqfriendlistbtn.h
#ifndef QQQFRIENDLISTBTN_H#define QQQFRIENDLISTBTN_H#include <QWidget>#include <QPushButton>#include <QLabel>#include <QPixmap>#include <QHBoxLayout>class QFriendListBtn : public QPushButton{public:explicit QFriendListBtn(QWidget *parent = nullptr);void setImageLbl(const QPixmap &pixmap);void setTextLbl(QString text);QLabel *getImageHandle();QLabel *getTextHandle();private:QLabel *imageLbl;QLabel *textLbl;};class QQQFriendList : public QWidget{Q_OBJECTpublic:explicit QQQFriendList(QWidget *parent = nullptr);void setupUI();private:QFriendListBtn *friendBtn1;QFriendListBtn *friendBtn2;QWidget *friendWdg1;QWidget *friendWdg2;quint8 friendList1;quint8 friendList2;signals:public slots:};#endif // QQQFRIENDLISTBTN_H
qqqfriendlistbtn.cpp
#include "qqqfriendlistbtn.h"#include <QVBoxLayout>#include <QDebug>QFriendListBtn::QFriendListBtn(QWidget *parent) : QPushButton(parent){imageLbl=new QLabel;imageLbl->setFixedWidth(20);imageLbl->setScaledContents(true);imageLbl->setStyleSheet(QString("QLabel{background-color:transparent;}"));textLbl=new QLabel;textLbl->setStyleSheet("QLabel{background-color:transparent;}");QHBoxLayout *mainLayout=new QHBoxLayout;mainLayout->addWidget(imageLbl);mainLayout->addWidget(textLbl);mainLayout->setMargin(0);mainLayout->setSpacing(0);this->setLayout(mainLayout);}void QFriendListBtn::setImageLbl(const QPixmap &pixmap){imageLbl->setPixmap(pixmap);}void QFriendListBtn::setTextLbl(QString text){textLbl->setText(text);}QLabel *QFriendListBtn::getImageHandle(){return imageLbl;}QLabel *QFriendListBtn::getTextHandle(){return textLbl;}QQQFriendList::QQQFriendList(QWidget *parent) : QWidget(parent),friendList1(0),friendList2(0){setupUI();}void QQQFriendList::setupUI(){this->resize(300,600);friendBtn1=new QFriendListBtn;friendBtn1->setObjectName("QFriendListBtn");friendBtn1->setTextLbl("好友列表1");friendBtn1->setImageLbl(QPixmap(":/resource/icon/向右箭头1.jpg"));friendBtn1->setStyleSheet("#QFriendListBtn{background-color:blue}""#QFriendListBtn:hover{background-color:rgba(250,50,50,0.4)}""#QFriendListBtn:pressed{background-color:rgba(50,250,50,0.4)}");QLabel *friendLbl1=friendBtn1->getTextHandle();friendLbl1->setStyleSheet("QLabel{color:rgba(255,255,255,1)}"); //设置按钮文本框字体颜色friendBtn2=new QFriendListBtn;friendBtn2->setTextLbl("好友列表2");friendBtn2->setImageLbl(QPixmap(":/resource/icon/向右箭头1.jpg"));friendWdg1=new QWidget;friendWdg1->setParent(this);friendWdg1->setFixedHeight(100);friendWdg1->setVisible(false); //屏蔽好友列表1界面friendWdg1->setStyleSheet("QWidget{background-color:red}");friendWdg2=new QWidget;friendWdg2->setParent(this);friendWdg2->setFixedHeight(100);friendWdg2->setVisible(false); //屏蔽好友列表2面friendWdg2->setStyleSheet("QWidget{background-color:green}");QVBoxLayout *vlayout=new QVBoxLayout;vlayout->addWidget(friendBtn1);vlayout->addWidget(friendWdg1);vlayout->addWidget(friendBtn2);vlayout->addWidget(friendWdg2);vlayout->addStretch();vlayout->setMargin(0);vlayout->setSpacing(0);this->setLayout(vlayout);connect(friendBtn1,&QFriendListBtn::clicked,[this](bool){if(friendList1%2){friendBtn1->setImageLbl(QPixmap(":/resource/icon/向右箭头1.jpg"));friendWdg1->setVisible(false); //friendList1偶数屏蔽好友列表界面，奇数显示好友列表界面}else{friendBtn1->setImageLbl(QPixmap(":/resource/icon/向下箭头.jpg"));friendWdg1->setVisible(true);}friendList1++;qDebug()<<"单击按钮1";});connect(friendBtn2,&QFriendListBtn::clicked,[this](bool){if(friendList2%2){friendBtn2->setImageLbl(QPixmap(":/resource/icon/向右箭头1.jpg"));friendWdg2->setVisible(false);}else{friendBtn2->setImageLbl(QPixmap(":/resource/icon/向下箭头.jpg"));friendWdg2->setVisible(true);}friendList2++;});}
widget.h
#ifndef WIDGET_H#define WIDGET_H#include <QWidget>namespace Ui {class Widget;}class Widget : public QWidget{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private slots:void on_pushButton_clicked();private:Ui::Widget *ui;};#endif // WIDGET_H
widget.cpp
#include "widget.h"#include "ui_widget.h"#include "qqqfriendlistbtn.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget){ui->setupUi(this);}Widget::~Widget(){delete ui;}void Widget::on_pushButton_clicked(){QQQFriendList *qqFriendList=new QQQFriendList(nullptr);qqFriendList->setWindowModality(Qt::WindowModal);qqFriendList->show();}
main.cp
#include "widget.h"#include <QApplication>int main(int argc, char *argv[]){QApplication a(argc, argv);Widget w;w.show();return a.exec();}
2.3程序运行效果图如下所示
参考内容：
/qq_31281189/article/details/51957364（参考：好友列表伸缩功能）
用Qt实现QQ好友列表界面伸缩功能（完全一模一样）（伸展和收缩 抽屉效果 类似树形控件）（鼠标划过QSS效果）
