用Qt实现QQ好友列表界面伸缩功能（完全一模一样）（伸展和收缩、抽屉效果、类似树形控件）（鼠标划过QSS效果）

本文主要总结用Qt的自定义按钮和QWidget界面实现QQ好友列表的界面伸展和收缩功能，以及鼠标滑过、鼠标单击的QSS样式表效果。全文分为两大部分，分别是原理讲解和效果实现。

抽缩界面效果图

 

源代码下载地址：（已经上传，过审后贴上来！）

 

一、原理讲解

实现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（参考：好友列表伸缩功能）