QT 完美实现圆形按钮

QT 版本：5.6.0

官方的按钮有些普通，如果我们想要换成自己喜欢的按钮而却无从下手，那么请继续往下阅读（皮一下）。

首先，可以在网络上搜索一下自己喜欢的按钮图形（或者可以自行绘制），我以下面的图形为例：

开始制作：

一、建立 QT 工程，并加入图形资源

创建好工程，向工程中加入资源文件：

在资源文件中加入两个按钮图片，一个用于正常显示，一个用于鼠标停留的时候显示：

二、构造 MyButton 类

该类继承自 QPushButton

借助 enterEvent 与 leaveEvent 实现按钮的动态变化。

mybutton.h 文件内容：

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QPushButton>
#include <QWidget>

class MyButton : public QPushButton
{
    Q_OBJECT

public:
    MyButton(QWidget *);

protected:
    virtual void enterEvent(QEvent *);
    virtual void leaveEvent(QEvent *);
};

#endif // MYBUTTON_H

三、实现 MyButton 类的各个接口

mybutton.cpp 文件内容：

#include "mybutton.h"
#include "ui_widget.h"
#include <QPixmap>
#include <QBitmap>

MyButton::MyButton(QWidget *parent):
    QPushButton(parent)
{
    QPixmap pixmap(":/init.png");

    resize(pixmap.size());
    /* 设置按钮的有效区域 */
    setMask(QBitmap(pixmap.mask()));
    setStyleSheet("QPushButton{border-image: url(:/init.png);}");
}

void MyButton::enterEvent(QEvent *)
{
    setStyleSheet("QPushButton{border-image: url(:/click.png);}");
}

void MyButton::leaveEvent(QEvent *)
{
    setStyleSheet("QPushButton{border-image: url(:/init.png);}");
}

引入 QPixmap 的原因：借助 pixmap 实现按钮的 setMask 接口，该功能是禁止掉图形外的区域点击有效。

四、创建 MyButton

Widget.cpp 文件中加入：

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

    new MyButton(this);
    this->setWindowFlags(Qt::FramelessWindowHint);
}

运行效果：

初始按钮状态：

鼠标放上后状态：

后期补充：

设置屏蔽区域方法一：

QPixmap pixmap(":/init.png");

/* 设置按钮的有效区域 */
setMask(QBitmap(pixmap.mask()));

设置屏蔽区域方法二：

/* 半径为 35 的圆形按钮 */
setMask(QRegion(0,0,70,70,QRegion::Ellipse));