设置QWidget为圆角矩形（同时设置背景图和圆角矩形）

使用QPainterPath实现圆角矩形背景的无边框QWidget

原创

已于 2022-12-14 11:00:20 修改 · 4.3k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#c++ #qt

于 2022-04-29 17:18:18 首次发布

本文介绍了如何在Qt项目中设置一个带有圆角矩形背景且无边框的QWidget。通过重写paintEvent方法，结合QPainterPath和QBitmap，实现了平滑的圆角矩形效果，并给出了使用QPainterPath绘制圆角矩形的代码示例，对比了setMask方法的效果，展示出更好的视觉体验。

在实际项目开发过程中有时需要设置QWidget中的背景图的同时还需要将其设置为圆角矩形样式。此时可以通过重绘事件完成两项工作。

这里圆角矩形的实现主要是利用了QBitmap，QBitmap作为图片掩码，只有当QBitmap区域上像素为1时，对应的区域内容才能显示。可以先使用QBitmap绘制一个自己需要的区域形状，然后罩在QWidget上即可实现需要的效果。

具体步骤如下：

1. 首先设置属性为无边框（不设置时setMask同样会导致样式为无边框）

setWindowFlags(Qt::FramelessWindowHint);

2. 重写重绘事件

void YourClass::paintEvent(QPaintEvent *event)
{

//绘制样式
QStyleOption opt;
opt.initFrom(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);//绘制样式

QBitmap bmp(this->size());
bmp.fill();
QPainter painter(&bmp);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);

//此处可修改圆角矩形大小，也可以绘制为其他想要的形状，比如圆形
painter.drawRoundedRect(bmp.rect(), 12, 12);
//painter.drawEllipse(bmp.rect());绘制圆或椭圆
//该函数便使得QBitmap上像素为1的区域才显示出来
setMask(bmp);

//QPainter p(this);

//此处背景图可自由设置
p.drawPixmap(0, 0, this-&g