QT 圆形窗体，圆形按钮

刺骨的言语ヽ痛彻心扉 2022-05-27 05:50 782阅读 0赞

**                                                                            QT 圆形窗体，圆形按钮**

**一、简要说明**

**1、在窗体上画一个圆形 (如果添加上点击等事件，这个圆形就相当于一个控件——圆形PushButton)**

**2、无边框**

**3、窗体透明化，窗体上的控件不透明**

**4、实现无边框拖动**

**代码打包：链接: https://pan.baidu.com/s/1GRd37\_QuHLAHqu9Nm2AGiQ 提取码: p9xx **

**二、效果**

**![20180528152543805][]**

**![20180412173429113][]**

**三、工程文件结构**

**![20180412173451267][]**

**四、源码**

**1、MyButton.pro文件**

QT +=widgets gui
    
    SOURCES += \
        main.cpp \
        circlebutton.cpp
    
    HEADERS += \
        circlebutton.h

**2、circlebutton.h文件**

#ifndef CIRCLEBUTTON_H
    #define CIRCLEBUTTON_H
    
    #include <QWidget>
    
    class CircleButton : public QWidget
    {
        Q_OBJECT      //使用信号与槽需要的宏
    public:
        explicit CircleButton(QWidget *parent = 0);    //explicit 避免歧义
        CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);
    
        void paintEvent(QPaintEvent *);                //--绘图事件，调用update()时触发
        void mousePressEvent(QMouseEvent *e);         //--鼠标按下事件
        void mouseReleaseEvent(QMouseEvent *e);     //--鼠标释放事件
        void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件
    
        bool isContains(QPoint p);//判断鼠标是否在圆形范围之内
        void initForm();//初始化窗体
    signals:
        void clicked();//点击信号
    public slots:
    private:
        QString _text;    //控件显示文本
        QPoint _center;  //圆心位置坐标
        QPoint beginPos;//圆形起始坐标
        int _radius;   //圆形半径
    public:
        bool _pressed;//左键单击变色控制
    };
    
    #endif // CIRCLEBUTTON_H

**3、circlebutton.cpp文件**

#include "circlebutton.h"
    #include <QPainter>
    #include <QMouseEvent>
    
    CircleButton::CircleButton(QWidget *parent) :
        QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
    {
        initForm();
    }
    CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
        QWidget(parent),_text(text), _center(center),_radius(radius)
    {
        initForm();
    }
    
    void CircleButton::initForm()
    {
        _pressed = false;
        beginPos = this->pos();
        //无边框
        this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
        /*  窗口整体透明，但窗口控件不透明*/
       this->setAttribute(Qt::WA_TranslucentBackground,true);
    }
    void CircleButton::paintEvent(QPaintEvent *)
    {
        QPainter p(this);//将当前窗体作为画布
        if(_pressed)
            p.setBrush(Qt::yellow);//粉刷为黄色
        else
            p.setBrush(QColor(255,255,255,10));
        p.setPen(Qt::NoPen);//没有线条
        //画圆形
        p.drawEllipse(_center,_radius,_radius);
        //添加文本
        QPen pen = QPen(Qt::black);
        p.setPen(pen);
        p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中：QTextOption(Qt::AlignCenter)
    }
    void CircleButton::mousePressEvent(QMouseEvent *e)
    {
       if(isContains(e->pos()))
        {
            _pressed = true;
            beginPos = e->pos();//鼠标相对窗体的位置
            update();//触发窗体重绘
        }
    
    }
    
    void CircleButton::mouseReleaseEvent(QMouseEvent *e)
    {
        _pressed = false;
        update();//触发窗体重绘
    
        if(isContains(e->pos()))//当鼠标点击按钮
            emit clicked();//发送点击信号
    
    }
    
    void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
    {
        if (_pressed)
        {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             this->move(e->pos() - beginPos + this->pos());
             //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
        }
    }
    
    
    bool CircleButton::isContains(QPoint p)
    {
        return (_center.x()-_radius < p.x()
                && _center.x()+_radius > p.x()
                && _center.y()-_radius < p.y()
                && _center.y()+_radius > p.y());
    }

**4、main.cpp文件**

#include <QApplication>
    #include "circlebutton.h"
    
    int main(int argc,char** argv)
    {
        QApplication app(argc,argv);
        CircleButton *circle= new CircleButton("圆形窗体",QPoint(40,40),40);
        circle->show();
        return app.exec();
    }

五、视频水印   (窗体置顶)

1、效果

![20180528152505171][]

2、修改后的代码

circlebutton.h文件

#ifndef CIRCLEBUTTON_H
    #define CIRCLEBUTTON_H
    
    #include <QWidget>
    #include <QMenu>
    class CircleButton : public QWidget
    {
        Q_OBJECT
    public:
        explicit CircleButton(QWidget *parent = 0);
        CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);
    
        void paintEvent(QPaintEvent *);
        void mousePressEvent(QMouseEvent *e);
        void mouseReleaseEvent(QMouseEvent *e);
        void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件
        void contextMenuEvent(QContextMenuEvent *);  //--右键菜单事件
        void closeEvent(QCloseEvent *);     //重写退出
    
        bool isContains(QPoint p);//判断鼠标是否在控件范围之内
        void initForm();//初始化窗体
        void setText(QString text);//设置显示文本
    signals:
        void clicked();//点击信号
    public slots:
        void inputText();//输入文本
        QString getText();
    private:
        QString _text;
        QPoint _center;
        QPoint beginPos;
        QMenu *menu; //右键菜单对象
        int _radius;
    public:
        bool _pressed;//单击按钮变色控制
    };
    
    #endif // CIRCLEBUTTON_H

circlebutton.cpp文件

#include "circlebutton.h"
    #include <QPainter>
    #include <QMouseEvent>
    #include <QInputDialog>
    #include <QLineEdit>
    
    
    CircleButton::CircleButton(QWidget *parent) :
        QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
    {
        initForm();
    }
    CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
        QWidget(parent),_text(text), _center(center),_radius(radius)
    {
        initForm();
    }
    
    void CircleButton::initForm()
    {
        _pressed = false;
        beginPos = this->pos();
        //无边框
        this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
        /*  窗口整体透明，但窗口控件不透明*/
       this->setAttribute(Qt::WA_TranslucentBackground,true);
        menu = new QMenu(this);//创建右键菜单
        menu->addAction("设置文本", this, SLOT(inputText()));
        menu->addAction("退出", this, SLOT(close()));
    }
    void CircleButton::paintEvent(QPaintEvent *)
    {
        QPainter p(this);//将当前窗体作为画布
        QPen pen = QPen(Qt::red);
        pen.setWidth(1);
        p.setPen(pen);
        if(_pressed)
            p.setBrush(Qt::yellow);//粉刷为黄色
        else
            p.setBrush(QColor(255,255,255,1));
        p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中：QTextOption(Qt::AlignCenter)
    
        pen.setColor(QColor(255,255,255,1));
        p.setPen(pen);
        //画圆
        p.drawEllipse(_center,_radius,_radius);
    
    }
    void CircleButton::mousePressEvent(QMouseEvent *e)
    {
       if(e->button() == Qt::LeftButton && isContains(e->pos()))
        {
            _pressed = true;
            beginPos = e->pos();//鼠标相对窗体的位置
            update();//触发窗体重绘
        }
    
    }
    
    void CircleButton::mouseReleaseEvent(QMouseEvent *e)
    {
        _pressed = false;
        update();//触发窗体重绘
    
        if(isContains(e->pos()))//当鼠标点击按钮
            emit clicked();//发送点击信号
    
    }
    
    void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
    {
        if (_pressed)
        {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             this->move(e->pos() - beginPos + this->pos());
             //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
        }
    }
    
    void CircleButton::contextMenuEvent(QContextMenuEvent *)
    {
        this->setCursor(Qt::ArrowCursor);
        menu->exec(cursor().pos());
    }
    
    bool CircleButton::isContains(QPoint p)
    {
        return (_center.x()-_radius < p.x()
                && _center.x()+_radius > p.x()
                && _center.y()-_radius < p.y()
                && _center.y()+_radius > p.y());
    }
    void CircleButton::setText(QString text)
    {
        this->_text = text;
    }
    
    void CircleButton::inputText()
    {
        bool ok = false;
    
        QString text = QInputDialog::getText(this,tr("设置文本"),tr("请输入文本"),QLineEdit::Normal,getText(),&ok,0);
        if ( ok && !text.isEmpty() )
        {
            this->setText(text);
        }
    }
    void CircleButton::closeEvent(QCloseEvent * )
    {
        this->close();
    }
    QString CircleButton::getText()
    {
        return this->_text;
    }

六、圆形按钮

使用QSS样式实现圆形按钮。

效果:PushButton2是直接右键-->改变样式表，PushButton3是再代码控制的。

![20191128224846265.gif][]

工程结构: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70][]

布局:三个一样大小的PushButton

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1][]

样式：

QPushButton{/*默认显示*/
    border-radius:70px;/*圆角弧度(为正方形边长一半时就是圆形)*/
    background-color:rgba(0,255,0,255);/*背景色*/
    }
    QPushButton:hover{/*鼠标悬停*/
    background-color:rgba(0,0,255,255);
    }
    QPushButton:pressed{/*鼠标按下*/
    background-color:rgba(255,0,0,255);
    }

[20180528152543805]: /images/20220527/682f5578fa8b46d3a83bfcd8843e2506.png
[20180412173429113]: /images/20220527/eda293fa2d0e4b6682db470231a6fe9c.png
[20180412173451267]: /images/20220527/dedeb016b0784d58baf6e3405a7cd296.png
[20180528152505171]: /images/20220527/3b72361864854ee290a09b5bd8d52ce1.png
[20191128224846265.gif]: /images/20220527/f8862212b8e24e73a359beddfea97073.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70]: /images/20220527/c53b69a35cab4aceaba6dd245ec4e500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1]: /images/20220527/c44e64c7479844bb864f8e1f23f03bef.png