Change rectangular Qt button to round

Question

I'm trying to create a round button in Qt. A simple form with a single button QPushButton was created in designer. I'm attempting to turn this into a round button using setMask(). As soon as setMask() is applied the button disappeares. Does a custom widget need to be created to make a round button?

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QMessageBox>
#include <QtGui/QPushButton>


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

    ui->pushButton->setText("Test Text");
    ui->pushButton->setFixedHeight(200);
    ui->pushButton->setFixedWidth(200);

    //Set Starting point of region 5 pixels inside , make region width & height
    //values same and less than button size so that we obtain a pure-round shape

    QRegion* region = new QRegion(*(new QRect(ui->pushButton->x()+5,ui->pushButton->y()+5,190,190)),QRegion::Ellipse);
    ui->pushButton->setMask(*region);
    ui->pushButton->show();


}

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

void MainWindow::on_pushButton_clicked()
{
    QMessageBox msgbox;
    msgbox.setText("Text was set");
    msgbox.show();

}

Note: If the button is created in code and applied to a window before the window is displayed, the button is displayed. I would like to use the WYSIWIG capabilities of the Qt Designer rather than creating the entire form in code.

score 22 · Accepted Answer · edited Sep 05 '18 at 17:28

22

It is going invisible, but its because you do not have the ellipse centered around the correct point.

QWidget::setMask "causes only the parts of the widget which overlap region to be visible. If the region includes pixels outside the rect() of the widget, window system controls in that area may or may not be visible, depending on the platform".

Try this code instead and you'll see:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->pushButton->setText("Test Text");
    ui->pushButton->setFixedHeight(200);
    ui->pushButton->setFixedWidth(200);
    QRect rect(0,0,190,190);
    qDebug() << rect.size();
    qDebug() << ui->pushButton->size();
    QRegion region(rect, QRegion::Ellipse);
    qDebug() << region.boundingRect().size();
    ui->pushButton->setMask(region);
}

Ps. Why do you set the height of the pushButton twice? I'm assuming that's a typo and you meant width.

edited Sep 05 '18 at 17:28

Basti Vagabond

1,458
1
18
26

answered Oct 04 '12 at 19:56

stackunderflow

10,122
4
20
29

Thank you. This code works. The duplicate height settings was a typo. The original code was based on [link]( http://www.codeprogress.com/cpp/libraries/qt/qtQPushButtonRoundShape.php#.UG3ry5jA8XF) modified to reshape a button created in Qt Designer. – DarwinIcesurfer Oct 04 '12 at 20:09
1

Okay @DarwinIcesurfer, I fixed the typo for you. – stackunderflow Oct 04 '12 at 22:16
1

Thank you! Just a little comment towards general c++ memory management. You might want to avoid creating unnecessary pointers here and especially avoid not deleting them. Both the rect, as well as the region pointers are not cleaned up before the vars holding them go out of scope. Also the respective calls you create them for require you to de-ref them anyways, so maybe just make them regular objects that automatically get garbage collected. You could even reduce the setMask call to something like: `ui->pushButton->setMask(QRegion(ui->pushButton->geometry(), QRegion::Ellipse));` – Basti Vagabond Aug 31 '18 at 14:09
1

@BastiVagabond, I agree this code is bad and is not following the RAII principles. Instead of adding your useful comment here, you can just edit the answer directly and I'll gladly accept. Thanks! – stackunderflow Aug 31 '18 at 20:50

Lol4t0 · Answer 2 · 2014-11-27T19:45:51.517

20

I think the simplest solution would be using stylesheet.

Like this:

 background-color: white;
 border-style: solid;
 border-width:1px;
 border-radius:50px;
 border-color: red;
 max-width:100px;
 max-height:100px;
 min-width:100px;
 min-height:100px;

See also examples and reference.

Note, that you have to create complete style for your button, as standard style will not be applicable.

edited Nov 27 '14 at 19:45

answered Oct 04 '12 at 19:32

Lol4t0

12,444
4
29
65

1

This provides a work-around to the specific case I raised. It doesn't address the more general case of applying a mask. I would like to understand why the button disappears when a mask is applied. – DarwinIcesurfer Oct 04 '12 at 19:50
@DarwinIcesurfer, I think, because its painting can't be handled anymore by given style. – Lol4t0 Oct 04 '12 at 19:56
Update to Qt5 manual: http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qpushbutton – Dave Appleton Nov 27 '14 at 17:27

score 2 · Answer 3 · answered Jun 24 '21 at 15:12

This will work perfectly try this -

QPushButton {
color: #333;
border: 2px solid #555;
border-radius: 20px;
border-style: outset;
background: qradialgradient(
cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #888
);
padding: 5px;
}

QPushButton:hover {
background: qradialgradient(
cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #bbb
);
}

Change rectangular Qt button to round

3 Answers3

Linked