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));