Qt 不规则窗口,不规则按钮，不规划控件不规则界面

恋恋西风

已于 2023-02-14 14:30:35 修改

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： QT 文章标签： qt ui

于 2023-02-14 13:56:32 首次发布

本文链接：https://blog.csdn.net/q610098308/article/details/129023985

QT 专栏收录该内容

70 篇文章

订阅专栏

文章介绍了如何在Qt中创建不规则形状的窗口和按钮，通过使用带有透明区域的PNG图片以及调整窗口和按钮的属性。两种方法分别通过重绘和设置样式表实现，确保点击透明部分不会触发点击事件，从而达到真正的不规则界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一些特殊情况，需要使用不规则窗口或按钮，看起来非常炫酷。

类似：

Qt 实现不规则样式设置，不是视觉欺骗，是真正的不规则，点击外面不会触发按钮的点击信号.

Part1：不规则窗口

效果：

显示成一张图片中的图形，使用带有透明区域的png图片；

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

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

    this->resize(100,100);
    setWindowOpacity(1);
    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
 //   this->setStyleSheet("background-image: url(:/planning.png)");
    mQPixmap.load(":/planning.png");
    this->resize(mQPixmap.size());
}

Widget::~Widget()
{
    delete ui;
}
void Widget::paintEvent(QPaintEvent *e)
{
    QPainter painter(this);
    painter.drawPixmap(0,0,mQPixmap);
}

这里注意：

必须重新绘制，构造函数也一定要调用resize。

见视频，可见，点击到空白处，消失；可见实现了真正的不规则界面；

不规则窗口

另一种方式实现，通过 setStyleSheet 这种方式用于 Button较多；

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

#include <QPainter>
#include <QStyleOption>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    this->resize(100,100);
    setWindowOpacity(1);
    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    this->setStyleSheet("background-image: url(:/planning.png)");
}

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

void Widget::paintEvent(QPaintEvent *e)
{
    QStyleOption opt;
    opt.initFrom(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    QWidget::paintEvent(e);
}

注意：

 this->resize(100,100); //实际图片大小，否则会变成填充；

效果:

：

Part2 : 按钮实现

    QPixmap pix;
        pix.load(":/planning-hov.png");
        ui->pushButton->setFixedSize(pix.size());
        ui->pushButton->setMask(pix.mask());
        ui->pushButton->setStyleSheet("background-image: url(:/planning-hov.png)");