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);
}
效果图: