Qt 设置圆角边框

  Qt中设置圆角边框很方便，这里我们介绍使用qss(setStyleSheet方法)和重写PainteEvent的方式来实现QWidget圆角边框。

一、使用qss实现

很重要的两点:
1.设置属性:

setAttribute(Qt::WA_TranslucentBackground);

2.重写PaintEvent，对于我们自己定制的继承QWidget的类如果不重写PaintEvent的话，它只支持background, background-clip and background-origin这些属性。

void Widget::paintEvent(QPaintEvent *event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
}

对于设置圆角，qss支持：
border-top-left-radius 设置左上角圆角;
border-top-right-radius 设置右上角圆角;
border-bottom-left-radius 设置左下角圆角;
border-bottom-right-radius 设置右下角圆角;
border-radius 设置四个角圆角;

源码：

#include "widget.h"
#include "ui_widget.h"
#include <QStyleOption>
#include <QPainter>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet(
                    "background-color: green;\
                     border-radius: 15px;   "
                 );
}

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

void Widget::paintEvent(QPaintEvent *event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
}

效果：

二、重写paintEvent事件

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    setAttribute(Qt::WA_TranslucentBackground);
    setWindowFlags(Qt::FramelessWindowHint);
}

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

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing); 
    painter.setBrush(QBrush(Qt::green));
    painter.setPen(Qt::transparent);
    QRect rect = this->rect();
    rect.setWidth(rect.width() - 1);
    rect.setHeight(rect.height() - 1);
    // rect: 绘制区域  15：圆角弧度
    painter.drawRoundedRect(rect, 15, 15);

    QWidget::paintEvent(event);
}

效果图：