用Qt實作QQ好友清單界面伸縮功能（完全一模一樣）（伸展和收縮、抽屜效果、類似樹形控件）（滑鼠劃過QSS效果）

本文主要總結用Qt的自定義按鈕和QWidget界面實作QQ好友清單的界面伸展和收縮功能，以及滑鼠滑過、滑鼠單擊的QSS樣式表效果。全文分為兩大部分，分别是原理講解和效果實作。

抽縮界面效果圖

源代碼下載下傳位址：https://download.csdn.net/download/naibozhuan3744/11860177

一、原理講解

實作QQ好友清單伸縮或者抽屜效果，不是像QToolbox那樣的效果，其實很簡單。隻需要用垂直布局将按鈕和QWidget控件布局到一起，然後通過QWidget::setVisible(bool)實作QWidget界面的顯示和隐藏就行。其中自定義按鈕的原理講解可以參考部落客這篇部落格：https://blog.csdn.net/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_OBJECT
public:
    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_OBJECT

public:
    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程式運作效果圖如下所示

抽縮界面效果圖

參考内容：

https://blog.csdn.net/qq_31281189/article/details/51957364（參考：好友清單伸縮功能）