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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM