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

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

三公子Tjq 2019-10-13 19:52:52  1818  收藏 5

分类专栏： Qt工程应用 文章标签： 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帮助文档