qt 自定义按钮图标

• 自定义按钮样式，鼠标悬停时，鼠标离开时，鼠标点击时。按钮有文本、背景、图标可设置。
• 1、设置背景直接通过setStyleSheet样式设计即可
• 如：

ui->pushButton_3->setStyleSheet("QPushButton{background-color:rgb(255,182,193);}"
		                "QPushButton:hover{background-color:rgb(219,112,147);}"
		                "QPushButton:pressed{background-color:rgb(199,21,133);}");

• hover 表示鼠标悬停时的样式；pressed 表示鼠标点击时的样式；不加则表示按钮默认的样式也是鼠标离开后的样式。
• 2、设置图标，一种也是可以通过setStyleSheet样式设计
• 如：

ui->pushButton_4->setStyleSheet("QPushButton{border-image:url(:/src/back_b.png);}"
                      "QPushButton:hover{border-image:url(:/src/back_w.png);}"
                      "QPushButton:pressed{border-image:url(:/src/back_w.png);}");

• 即关键代码：border-image:属性设置即可。但是这个属性相当于是设置的按钮的背景，如果需要再设置文本，则会直接覆盖在背景上。
• 2、所以第二种就是通过设置图标即setIcon，这里最好是直接新建一个类，专门设置按钮在鼠标几种情况下的图标，然后按钮再提升为此方法。
• 先看案例效果：

• 该例子包含文件：
• 
• ui设计界面控件布局情况：
  
• btn.h:

#ifndef BTN_H
#define BTN_H

#include <QPushButton>
class btn : public QPushButton
{
    Q_OBJECT
public:
    explicit btn(QWidget *parent = nullptr);

    void set_btn_icon(QString normal_icon, QString hover_icon, QString click_icon);
protected:
    void enterEvent(QEvent *event);//鼠标悬停时
    void leaveEvent(QEvent *event);//鼠标离开时
    void mousePressEvent(QMouseEvent *event);//鼠标点击时

private:
    QString m_normal_icon;
    QString m_hover_icon;
    QString m_click_icon;

};
#endif // BTN_H

• btn.cpp:

#include "btn.h"
#include <QMouseEvent>
btn::btn(QWidget *parent): QPushButton(parent)
{

}

void btn::set_btn_icon(QString normal_icon, QString hover_icon, QString click_icon)
{
    m_normal_icon = normal_icon;
    m_hover_icon = hover_icon;
    m_click_icon = click_icon;

    setIcon(QIcon(m_normal_icon));//设置图标
}
//鼠标悬停时
void btn::enterEvent(QEvent *event)
{
    setIcon(QIcon(m_hover_icon));
    QPushButton::enterEvent(event);
}
//鼠标离开时
void btn::leaveEvent(QEvent *event)
{
    setIcon(QIcon(m_normal_icon));
    QPushButton::enterEvent(event);
}
//鼠标点击时
void btn::mousePressEvent(QMouseEvent *event)
{
    if (Qt::LeftButton == event->button())
        setIcon(QIcon(m_click_icon));

    QPushButton::mousePressEvent(event);
}

• widget.h:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_pushButton_close_clicked();

    void on_pushButton_max_clicked();

    void on_pushButton_min_clicked();

    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

    void on_pushButton_3_clicked();

    void on_pushButton_4_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

.widget.cpp:

#include "widget.h"
#include "ui_widget.h"
#include <QStyle>
#include <QMessageBox>
#include "btn.h"
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    setWindowFlags(Qt::FramelessWindowHint);

    ui->widget->setObjectName("title_widget");
    ui->widget->setStyleSheet("QWidget#title_widget{background-color:rgb(200,200,200)}");

    ui->pushButton_close->setFixedSize(20,20);//设置按钮大小
    ui->pushButton_close->setText("");        //清空文本
    ui->pushButton_max->setFixedSize(20,20);
    ui->pushButton_max->setText("");
    ui->pushButton_min->setFixedSize(20,20);
    ui->pushButton_min->setText("");

    //初始化按钮悬停，点击，离开时的图标
    ui->pushButton_close->set_btn_icon(":/src/close_b.png",
                                       ":/src/close_w.png",
                                       ":/src/close_w.png");
    ui->pushButton_min->set_btn_icon(":/src/min.png",
                                     ":/src/min.png",
                                     ":/src/min.png");
    ui->pushButton_max->set_btn_icon(":/src/nomol.png",
                                     ":/src/nomol.png",
                                     ":/src/nomol.png");


    //设置按钮按钮悬停，点击，离开时的背景和边框样式
    ui->pushButton_close->setStyleSheet("QPushButton{border-radius:10px;}"
                  "QPushButton:hover{background-color:rgb(204,0,0);"
                                        "border-radius:10px;}"
                  "QPushButton:pressed{background-color:rgb(244,92,94);"
                                        "border-radius:10px;}");

     ui->pushButton_max->setStyleSheet("QPushButton{border-radius:10px;}"
                  "QPushButton:hover{background-color:rgb(255,192,0);"
                                       "border-radius:10px;}"
                  "QPushButton:pressed{background-color:rgb(255,217,102);"
                                       "border-radius:10px;}");

     ui->pushButton_min->setStyleSheet("QPushButton{border-radius:10px;}"
                  "QPushButton:hover{background-color:rgb(82,127,52);"
                                       "border-radius:10px;}"
                  "QPushButton:pressed{background-color:rgb(0,176,80);"
                                       "border-radius:10px;}");



     ui->pushButton_3->setStyleSheet("QPushButton{background-color:rgb(255,182,193);"
                                     "border-radius:10px;}"
                  "QPushButton:hover{color:rgb(255,255,255);"
                                     "background-color:rgb(219,112,147);"
                                     "border-radius:10px;}"
                  "QPushButton:pressed{color:rgb(255,255,255);"
                                     "background-color:rgb(199,21,133);"
                                     "border-radius:10px;}");
     ui->pushButton_3->setFixedHeight(40);
     ui->pushButton_3->setText("点我试一试！");


    ui->label_2->setText("当前状态:默认大小");
    ui->label->setText("这是一个按钮测试界面，鼠标悬停，点击，离开时会有不同效果；"
                       "左上角是图标和背景发生变化，"
                       "上面是文本内容和背景变化，下面是图标和背景还有文字发生变化");
    ui->label->setWordWrap(true);//自动换行

     ui->pushButton->setText("删除");
     ui->pushButton->setFixedSize(70,30);
     ui->pushButton->set_btn_icon(":/src/delete_b.png",
                                  ":/src/delete_w.png",
                                  ":/src/delete_w.png");
     ui->pushButton->setStyleSheet("QPushButton{border: 1px solid;"
                                   "border-radius:5px;}"
                                   "QPushButton:hover{border: 0px solid;"
                                   "color:rgb(255,255,255);"
                                   "background-color:rgb(204,0,0);"
                                   "border-radius:5px;}"
                                   "QPushButton:pressed{border: 0px solid;"
                                   "background-color:rgb(244,92,94);"
                                   "border-radius:5px;}");

     ui->pushButton_2->setText("返回");
     ui->pushButton_2->setFixedSize(70,30);
     ui->pushButton_2->set_btn_icon(":/src/back_b.png",
                                    ":/src/back_w.png",
                                    ":/src/back_w.png");
     ui->pushButton_2->setStyleSheet("QPushButton{border: 1px solid;"
                                     "border-radius:5px;}"
                                   "QPushButton:hover{border: 0px solid;"
                                     "color:rgb(255,255,255);"
                                     "background-color:rgb(82,127,52);"
                                     "border-radius:5px;}"
                                   "QPushButton:pressed{border: 0px solid;"
                                     "background-color:rgb(0,176,80);"
                                     "border-radius:5px;}");


     ui->pushButton_4->setFixedSize(20,20);
     ui->pushButton_4->setStyleSheet("QPushButton{border-radius:5px;"
                                     "border-image:url(:/src/back_b.png);}"
                                   "QPushButton:hover{border: 0px solid;"
                                     "color:rgb(255,255,255);"
                                     "background-color:rgb(82,127,52);"
                                     "border-radius:5px;"
                                     "border-image:url(:/src/back_w.png);}"
                                   "QPushButton:pressed{border: 0px solid;"
                                     "background-color:rgb(0,176,80);"
                                     "border-radius:5px;"
                                     "border-image:url(:/src/back_w.png);}");
}

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


void Widget::on_pushButton_close_clicked()
{
    this->close();
}

void Widget::on_pushButton_max_clicked()
{
    if(isMaximized()){
        ui->pushButton_max->set_btn_icon(":/src/nomol.png",
                                         ":/src/nomol.png",
                                         ":/src/nomol.png");
        this->showNormal();//正常大小
        ui->label_2->setText("当前状态:默认大小");
    }else{
        ui->pushButton_max->set_btn_icon(":/src/max.png",
                                         ":/src/max.png",
                                         ":/src/max.png");
        this->showMaximized();//最大化
        ui->label_2->setText("当前状态:最大化");
    }
}

void Widget::on_pushButton_min_clicked()
{
    this->showMinimized();//最小化
}

void Widget::on_pushButton_clicked()
{
    QMessageBox::information(this,"删除","你点击了删除！");
}

void Widget::on_pushButton_2_clicked()
{
    QMessageBox::information(this,"返回","你点击了返回！");
}

void Widget::on_pushButton_3_clicked()
{
    static int cnt = 0;
    cnt++;
    ui->pushButton_3->setText(QString("你点了我%1次！有本事你再点一下试试！").arg(cnt));
    if(cnt >= 3)
         ui->pushButton_3->setText("算你狠！");
}

void Widget::on_pushButton_4_clicked()
{
    QMessageBox::information(this,"按钮","这是通过setStyleSheet设置的图标");
}

案例源码下载 提取码:53bf