CODEWITHSUNDEEP
windowsqtqt5stylingrounded-corners
KMK
KMK

Reputation: 1509

How to create smooth rounded corners on a popup widget in Qt

I have a widget with the windowsflag Qt::Popup set, and I'm trying to create smooth rounded corners.

I've tried using a stylesheet, but then the transparent part of the corners become black. The same happens if I overwrite the widget's paint event and draw a rectangle with rounded corners in the widget.

I've also tried to set a mask, but the result gets very pixelated.

After some reading, I found out that the black corners appears because the widget is a top-level widget. But I would think that it's still possible somehow?

How can I either get rid of the black corners or to smoothen the mask?

The paint event:

void PopUp::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);

    QColor greyColor(0xFFC5C6C6);
    QRect rect(0, 0, width(), height());  
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(QBrush(greyColor));
    painter.setPen(QPen(greyColor));
    painter.drawRoundedRect(rect, 10, 10);
}

The function that sets the mask:

void PopUp::setRoundedCorners(int radius)
{
    QRegion verticalRegion(0, radius, width(), height() - 2 * radius);
    QRegion horizontalRegion(radius, 0, width() - 2 * radius, height());
    QRegion circle(0, 0, 2 * radius, 2 * radius, QRegion::Ellipse);

    QRegion region = verticalRegion.united(horizontalRegion);
    region = region.united(circle);
    region = region.united(circle.translated(width() - 2 * radius, 0));
    region = region.united(circle.translated(width() - 2 * radius, height() - 2 * radius));
    region = region.united(circle.translated(0, height() - 2 * radius));

    setMask(region);
}

Upvotes: 6

Views: 7666

Answers (1)

Dmitry Sazonov
Dmitry Sazonov

Reputation: 9014

1. Create a widget and set its windowFlags to Qt::Window | Qt::FramelessWindowHint, and its attribute to Qt::WA_TranslucentBackground.

2. Create a QFrame inside of a widget.

3. Set a stylesheet to QFrame, for example:

border: 1px solid red;
border-radius: 20px;
background-color: black;

Upvotes: 17

Related Questions