Qt自定义按钮，实现图片、文字内容位置任意布局（上图下文字、左图又文字），以及样式表设置（鼠标滑过、单击效果）

本文主要总结在一个自定义的按钮。该按钮可以任意摆放图片和文字位置和距离，同时可以用QSS设置按钮内图片、文字、整个按钮的样式表效果，也就是说，可以实现鼠标划过、鼠标选中等样式表，跟原来QPushbutton的样式表效果一模一样！

源代码下载地址：https://download.csdn.net/download/naibozhuan3744/11860062

 

全文主要分为两大部分，分别为原理讲解和效果代码实现。

一、原理讲解

1.1该自定义按钮主要继承QPushbutton，然后在子类中添加两个QLabel（imageLbl、textLbl），分别显示图片和文字，用水平布局连接起来。

1.2实现布局内控件不影响父类控件背景：只需要将布局内所有控件背景色设为跟随背景色transparent，用QSS一句代码搞定。

1.3设置图片：可以设置一个函数获取全局变量imageLbl句柄，然后通过该句柄操作图片，同时该句柄可以设置任意QSS效果；可以设置图片大小和位置等。或者直接设置一个函数改变imageLbl。

1.4设置文本内容：可以设置一个函数获取全局变量textLbl句柄，然后通过该句柄操作文本内容，同时该句柄可以设置任意QSS效果；可以设置字体大小、位置、颜色等。

1.5设置整个按钮效果：可以先设置按钮实例对象的objectName，然后用该objectName来设置QSS样式表

二、自定义按钮和调用实例

2.1新建一个QWidget工程，勾选UI界面设计，然后添加一个名为QCustomButton的类；同时向工程中添加两个*.jpg资源文件。

2.2分别在qcustomerbutton.h、qcustomerbutton.cpp、widget.h、widget.cpp、main.cpp中添加如下代码

qcustomerbutton.h

#ifndef QCUSTOMERBUTTON_H
#define QCUSTOMERBUTTON_H

#include <QPushButton>
#include <QLabel>

class QCustomerButton : public QPushButton
{
public:
    explicit QCustomerButton(QWidget *parent = nullptr);
    void setImageLbl(const QPixmap &pixmap);
    void setTextLbl(QString text);
    QLabel *getImageHandle();
    QLabel *getTextHandle();

private:
    QLabel *imageLbl;
    QLabel *textLbl;
};

#endif // QCUSTOMERBUTTON_H

 

qcustomerbutton.cpp

#include "qcustomerbutton.h"
#include <QHBoxLayout>

QCustomerButton::QCustomerButton(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 QCustomerButton::setImageLbl(const QPixmap &pixmap)
{
    imageLbl->setPixmap(pixmap);
}

void QCustomerButton::setTextLbl(QString text)
{
    textLbl->setText(text);
}

QLabel *QCustomerButton::getImageHandle()
{
    return imageLbl;
}

QLabel *QCustomerButton::getTextHandle()
{
    return textLbl;
}

 

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();
    void setupUI();

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

 

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include "qcustomerbutton.h"

#include <QVBoxLayout>
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    setupUI();
}

Widget::~Widget()
{
    delete ui;
}

void Widget::setupUI()
{
    this->resize(300,600);
    QCustomerButton *friendBtn1=new QCustomerButton;
    friendBtn1->setObjectName("QCustomerButton");
    friendBtn1->setTextLbl("好友列表1");
    friendBtn1->setImageLbl(QPixmap(":/resource/icon/向右箭头.jpg"));
    friendBtn1->setStyleSheet("#QCustomerButton{background-color:blue}"
                              "#QCustomerButton:hover{background-color:rgba(250,50,50,0.4)}"
                              "#QCustomerButton:pressed{background-color:rgba(50,250,50,0.4)}");
    QLabel *friendLbl1=friendBtn1->getTextHandle();
    friendLbl1->setStyleSheet("QLabel{color:rgba(255,255,255,1)}"); //设置按钮文本框字体颜色

    QVBoxLayout *vlayout=new QVBoxLayout;
    vlayout->addWidget(friendBtn1);
    vlayout->addStretch();
    vlayout->setMargin(0);
    vlayout->setSpacing(0);
    this->setLayout(vlayout);

    connect(friendBtn1,&QCustomerButton::clicked,[this](bool){qDebug()<<"单击按钮1";});
}

 

main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

2.3程序运行效果如下图所示

 

 

参考内容：

Qt帮助文档

转载：https://blog.csdn.net/naibozhuan3744/article/details/102536188