QWidget设置背景图及圆角

article/2025/10/13 2:36:53

在Qt开发过程中，QWidget是经常作为主窗体的父窗口，有时我们需要对主窗口设置背景，设置圆角以达到美观的效果，通常的有以下三种方法：qss, QPalette设置以及paintEvent绘制。下面介绍这三种方法。

背景设置介绍

方法一：

setStyleSheet("{background-color:#ff0000;color:#ffffff;border-radius:4px;}");

方法二：

QPalette p = palette();//p.setColor(QPalette::Window, QColor(255, 0, 0));p.setBrush(QPalette::Window, QBrush(QPixmap(":/image/test.png").scaled(this->size(), Qt::IgnoreAspectRatio,Qt::SmoothTransformation)));setPalette(p);
void CustomWidget::initView()
{//方式一：//setStyleSheet("{background-color:#ff0000;color:#ffffff;border-radius:4px;}");//方式二：setWindowFlag(Qt::FramelessWindowHint);QPalette p = palette();//p.setColor(QPalette::Window, QColor(255, 0, 0));p.setBrush(QPalette::Window, QBrush(QPixmap(":/image/test.png").scaled(this->size(), Qt::IgnoreAspectRatio,Qt::SmoothTransformation)));setPalette(p);QPushButton *button = new QPushButton(this);button->setText("hello");button->setMinimumSize(QSize(50, 25));button->setMaximumSize(QSize(50, 25));button->show();
}
void MainWindow::initView()
{CustomWidget *custom = new CustomWidget(this);custom->resize(100, 50);custom->move(20, 20);custom->show();
}

运行结果：

这两种方法设置父窗口为QWidget的类中，不生效。因此只能采用第三种绘制的方式：

方法三：

重写paintEvent方法：

一、画圆角

#ifndef CUSTOMWIDGET1_H
#define CUSTOMWIDGET1_H#include <QWidget>class CustomWidget1 : public QWidget
{Q_OBJECT
public:explicit CustomWidget1(QWidget *parent = nullptr);void initView();
protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET1_H
#include "customwidget1.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget1::CustomWidget1(QWidget *parent) : QWidget(parent)
{QPushButton *button = new QPushButton(this);button->setText("hello");button->setMinimumSize(QSize(50, 25));button->setMaximumSize(QSize(50, 25));button->show();
}void CustomWidget1::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);//设置边框为圆角12pxpainter.drawRoundedRect(bmp.rect(), 12, 12);setMask(bmp);//再画颜色块QRect tmpRect = QRect(0, 0, this->width(), this->height());QBrush brush = QBrush(QColor("#ff0000"));p.setPen(Qt::NoPen);  //去掉边框线p.setBrush(brush);p.drawRect(tmpRect);
}

测试代码：

void MainWindow::initView()
{CustomWidget1 *custom1 = new CustomWidget1(this);custom1->resize(100, 50);custom1->move(20, 20);custom1->show();
}

运行效果：

这种绘制的四个角有毛刺的感觉，下面再用另外一种方式绘制：

#ifndef CUSTOMWIDGET2_H
#define CUSTOMWIDGET2_H#include <QWidget>class CustomWidget2 : public QWidget
{Q_OBJECT
public:explicit CustomWidget2(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET2_H
#include "customwidget2.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget2::CustomWidget2(QWidget *parent) : QWidget(parent)
{QPushButton *button = new QPushButton(this);button->setText("hello");button->setMinimumSize(QSize(50, 25));button->setMaximumSize(QSize(50, 25));button->show();
}void CustomWidget2::paintEvent(QPaintEvent *event)
{//绘制路径QPainter painter(this);painter.setPen(Qt::NoPen);painter.setBrush(Qt::black);painter.setRenderHint(QPainter::Antialiasing);//设置边框为圆角12pxQPainterPath path;path.addRoundedRect(rect(), 12, 12);painter.setClipPath(path);QBrush brush = QBrush(QColor("#ff0000"));painter.setBrush(brush);painter.drawRect(rect());
}

测试代码：

void MainWindow::initView()
{CustomWidget1 *custom1 = new CustomWidget1(this);custom1->resize(100, 50);custom1->move(20, 20);custom1->show();CustomWidget2 *custom2 = new CustomWidget2(this);custom2->resize(100, 50);custom2->move(150, 20);custom2->show();
}

运行效果：

上面是绘制QWidget的背景为圆角模式，要绘制一个圆角带渐变的背景呢

二、画渐变 

#ifndef CUSTOMWIDGET3_H
#define CUSTOMWIDGET3_H#include <QWidget>class CustomWidget3 : public QWidget
{Q_OBJECT
public:explicit CustomWidget3(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET3_H

#include "customwidget3.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget3::CustomWidget3(QWidget *parent) : QWidget(parent)
{}void CustomWidget3::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);//设置边框为圆角12pxpainter.drawRoundedRect(bmp.rect(), 12, 12);setMask(bmp);//再画一个渐变区域QRect tmpRect = QRect(0, 0, this->width(), this->height());QLinearGradient linearGradient = QLinearGradient(tmpRect.topLeft(), tmpRect.bottomLeft());linearGradient.setColorAt(0.0, QColor("#6BA2FF"));linearGradient.setColorAt(1.0, QColor("#004C00"));QBrush brush = QBrush(linearGradient);p.setPen(Qt::NoPen);  //去掉边框线p.setBrush(brush);p.drawRect(tmpRect);
}

测试代码：

这个有毛刺，下面绘制一个平滑的

#ifndef CUSTOMWIDGET4_H
#define CUSTOMWIDGET4_H#include <QWidget>class CustomWidget4 : public QWidget
{Q_OBJECT
public:explicit CustomWidget4(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET4_H

#include "customwidget4.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget4::CustomWidget4(QWidget *parent) : QWidget(parent)
{}void CustomWidget4::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setPen(Qt::NoPen);painter.setBrush(Qt::black);painter.setRenderHint(QPainter::Antialiasing);//设置边框为圆角12pxQPainterPath path;path.addRoundedRect(rect(), 12, 12);painter.setClipPath(path);//再画一个渐变区域QRect tmpRect = QRect(0, 0, this->width(), this->height());QLinearGradient linearGradient = QLinearGradient(tmpRect.topLeft(), tmpRect.bottomLeft());linearGradient.setColorAt(0.0, QColor("#6BA2FF"));linearGradient.setColorAt(1.0, QColor("#004C00"));QBrush brush = QBrush(linearGradient);painter.setPen(Qt::NoPen);  //去掉边框线painter.setBrush(brush);painter.drawRect(tmpRect);
}

测试代码：

void MainWindow::initView()
{CustomWidget1 *custom1 = new CustomWidget1(this);custom1->resize(100, 50);custom1->move(20, 20);custom1->show();CustomWidget2 *custom2 = new CustomWidget2(this);custom2->resize(100, 50);custom2->move(150, 20);custom2->show();CustomWidget3 *custom3 = new CustomWidget3(this);custom3->resize(100, 50);custom3->move(280, 20);custom3->show();CustomWidget4 *custom4 = new CustomWidget4(this);custom4->resize(100, 50);custom4->move(420, 20);custom4->show();
}

运行效果：

右边的为平滑的圆角，上面的背景为圆角和渐变，如果要带一个带圆角的背景图呢

三、画背景图

#ifndef CUSTOMWIDGET5_H
#define CUSTOMWIDGET5_H#include <QWidget>class CustomWidget5 : public QWidget
{Q_OBJECT
public:explicit CustomWidget5(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET5_H
#include "customwidget5.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget5::CustomWidget5(QWidget *parent) : QWidget(parent)
{}void CustomWidget5::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);//设置边框为圆角12pxpainter.drawRoundedRect(bmp.rect(), 12, 12);setMask(bmp);//再画图片  338X247p.drawPixmap(rect(), QPixmap(":/image/test.png"));
}

测试代码：

void MainWindow::initView()
{CustomWidget1 *custom1 = new CustomWidget1(this);custom1->resize(100, 50);custom1->move(20, 20);custom1->show();CustomWidget2 *custom2 = new CustomWidget2(this);custom2->resize(100, 50);custom2->move(150, 20);custom2->show();CustomWidget3 *custom3 = new CustomWidget3(this);custom3->resize(100, 50);custom3->move(280, 20);custom3->show();CustomWidget4 *custom4 = new CustomWidget4(this);custom4->resize(100, 50);custom4->move(420, 20);custom4->show();//338X247CustomWidget5 *custom5 = new CustomWidget5(this);custom5->resize(338, 247);custom5->move(20, 100);custom5->show();
}

运行效果：

去除毛刺的绘制方式：

#ifndef CUSTOMWIDGET6_H
#define CUSTOMWIDGET6_H#include <QWidget>class CustomWidget6 : public QWidget
{Q_OBJECT
public:explicit CustomWidget6(QWidget *parent = nullptr);protected:void paintEvent(QPaintEvent *event) override;signals:};#endif // CUSTOMWIDGET6_H
#include "customwidget6.h"
#include <QStyleOption>
#include <QPainter>
#include <QBitmap>CustomWidget6::CustomWidget6(QWidget *parent) : QWidget(parent)
{}void CustomWidget6::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setPen(Qt::NoPen);painter.setBrush(Qt::black);painter.setRenderHint(QPainter::Antialiasing);//设置边框为圆角12pxQPainterPath path;path.addRoundedRect(rect(), 12, 12);painter.setClipPath(path);//画图片painter.drawPixmap(rect(), QPixmap(":/image/test.png"));
}

测试代码：

void MainWindow::initView()
{CustomWidget1 *custom1 = new CustomWidget1(this);custom1->resize(100, 50);custom1->move(20, 20);custom1->show();CustomWidget2 *custom2 = new CustomWidget2(this);custom2->resize(100, 50);custom2->move(150, 20);custom2->show();CustomWidget3 *custom3 = new CustomWidget3(this);custom3->resize(100, 50);custom3->move(280, 20);custom3->show();CustomWidget4 *custom4 = new CustomWidget4(this);custom4->resize(100, 50);custom4->move(420, 20);custom4->show();//338X247CustomWidget5 *custom5 = new CustomWidget5(this);custom5->resize(338, 247);custom5->move(20, 100);custom5->show();CustomWidget6 *custom6 = new CustomWidget6(this);custom6->resize(338, 247);custom6->move(380, 100);custom6->show();
}

运行效果：

根据各种对比，用路径的绘制方法效果会好很多。


http://chatgpt.dhexx.cn/article/KwE8eB0G.shtml

相关文章

QWidget之adjustSize

QWidget之adjustSize

from PyQt5.Qt import * import sys# 创建一个应用程序对象 app QApplication(sys.argv)window QWidget()label QLabel(window) label.setText(学无止境) label.move(100, 100) label.setStyleSheet(background-color:gray)def changeCao():tmp label.text()学无止境label.…
阅读更多...
初识QWidget

初识QWidget

初识QWidget 在Qt中QWidget是一个非常关键和重要的类&#xff0c;推荐初学Qt的同学们第一个学习此类 在Qt的帮助手册中我们搜索QWidget&#xff0c;可以看到下图的描述 通过帮助手册我们了解到如果想使用QWidget这个类&#xff0c;需要包含QWidget这个头文件&#xff0c;Qt特…
阅读更多...
QWidget继承

QWidget继承

查看QWidget的继承于哪个类 方法一 随便写一个类继承自己QWidget 按住Ctrl鼠标单击QWidget即可 方法二 print(QWidget.__base__)方法三 print(QWidget.mro()) 链条式的继承展示 enjoy
阅读更多...
QWidget（长文）

QWidget（长文）

一、描述 1、QWidget 是用户界面的原子&#xff1a;它从窗口系统接收鼠标、键盘和其他事件&#xff0c;并在屏幕上绘制自己的表示。每个小部件都是矩形的&#xff0c;它们按Z顺序排序。小部件由其父部件和它前面的小部件剪裁。 2、未嵌入父窗口小部件的 QWidget 称为窗口。通…
阅读更多...
QWidget的使用

QWidget的使用

一、QWidget介绍 QWidget是用户操作的原子接口&#xff0c;它从窗口系统中接收鼠标&#xff0c;键盘以及其他事件&#xff0c;并绘制图形界面。QT提供的默认窗口基类只有QMainWindow、QWidget、和QDialog这三种&#xff0c;QMainWindow是带有菜单栏和工具栏的主窗口类&#xf…
阅读更多...
QWidget

QWidget

QWidget QWidget是容器组件&#xff0c;继承自QObject类和QPaintDevice类。能够绘制自己和处理用户输入&#xff0c;是QT中所有窗口组件类的父类&#xff0c;是所有窗口组件的抽象&#xff0c;每个窗口组件都是一个QWidget&#xff0c;QWidget类对象常用作父组件或顶级组件使用…
阅读更多...
QT学习总结之QWidget详解

QT学习总结之QWidget详解

1、说明 QWidget类是所有用户界面对象的基类。 QWidget是用户界面的原子类。它接收鼠标、键盘和来自系统的其他事件&#xff0c;并在屏幕上将它们绘制出来。每个Widget都是矩形的&#xff0c;并按照Z-order&#xff08;Z轴&#xff09;进行排序。一个Widget夹在它的Parent和它…
阅读更多...
VS2019安装与使用教程

VS2019安装与使用教程

VS2019安装与使用教程 可能有很多小伙伴们&#xff0c;知道VS2019这个软件&#xff0c;但是不知道怎么安装与使用&#xff0c;下面我将具体介绍VS2019的安装方法与创建我们自己的C项目以及如何运行自己编写的代码&#xff01; Visual Studio 2019(VS2019)简介 Microsoft Visual…
阅读更多...
vs2017初学c++环境配置及使用教程

vs2017初学c++环境配置及使用教程

作为一个计算机小白, 初学c的时候使用了vs2017, 配置环境如下 如图所示, 可以实现c的基本操作. 在vs2017的版本中, 取消了win32这个选项, 所以直接选择新建空项目. 在解决方案资源管理器中, 于源文件处新建.cpp文件, 即可执行操作. 如果出现闪现的情况, 则右键点击解决方案资…
阅读更多...
【转载】VS2019使用技巧

【转载】VS2019使用技巧

大家好&#xff0c;今天分享几个我知道的实用 VS 技巧&#xff0c;而这些技巧我发现很多人都不知道。因为我经常在工作中遇到&#xff1a;我在同事电脑上解决问题&#xff0c;或在会议上演示代码示例时&#xff0c;使用了一些 VS “骚”操作&#xff0c;他们会好奇地问&#xf…
阅读更多...
VS2019安装教程

VS2019安装教程

VS2019安装教程 &#xff08;如果下面的博客没有能解决你的问题或者你还有其他关于计算机方面的问题需要咨询可以加博主QQ&#xff1a;1732501467&#xff09; 在安装完JDK后&#xff0c;现在还不能使用java来进行编程&#xff0c;此时你还需要一个java开发工具&#xff0c;其…
阅读更多...
VS2017专业版使用最新版Qt5.9.2教程（最新教材）

VS2017专业版使用最新版Qt5.9.2教程（最新教材）

VS2017专业版使用最新版Qt5.9.2教程&#xff08;最新教材&#xff09; 目录 VS2017专业版使用最新版Qt5.9.2教程&#xff08;最新教材&#xff09; 运行环境&#xff1a; 1.安装Qt5.9.2 2.安装Qt5.9与VS2017之间的插件: 3.配置Qt VS Tool的环境. 4.设置创建的Qt的项目的…
阅读更多...
Visual Studio(VS)2013使用教程

Visual Studio(VS)2013使用教程

目录 1、初始2、新建项目3、点下一步后&#xff0c;此步后点完成4、解决方案资源管理器5、新建文件6、代码完成后不要点调试7、头文件显示&#xff1a;无法打开源文件路径未被包含若这一步没问题&#xff0c;则可能新建项时路径出错①添加包含目录级如上述②移除文件&#xff0…
阅读更多...
Visual Studio 2017安装和使用教程（详细

Visual Studio 2017安装和使用教程（详细

Visual Studio 2017安装和使用教程&#xff08;详细&#xff09; 2018-10-09 01:02 来源:c语言程序设计官方 </div>原标题&#xff1a;Visual Studio 2017安装和使用教程&#xff08;详细&#xff09; 前言 说在前面&#xff0c;各位读者记得将 C语言程序设计 设置星标…
阅读更多...
VS2019初步使用

VS2019初步使用

前言 前段时间把电脑重置了下&#xff0c;导致很多软件都被删除了&#xff0c;所以重新安装了&#xff0c;顺便把一些“陈年落后”的软件更新到了最新版。新版的软件和之前相比的确区别很大&#xff0c;更人性化了、功能也增加了不少&#xff0c;体会最深的就是Adobe Photosho…
阅读更多...
VS2017下载地址和安装教程（图解）

VS2017下载地址和安装教程（图解）

VS2017下载地址和安装教程&#xff08;图解&#xff09; 继 VS2015 版本后&#xff0c;微软又推出了功能更加强大的VS 2017。 Visual Studio 2017 不仅支持 C#、C、Python、Visual Basic、Node.js、HTML、JavaScript 等各大编程语言&#xff0c;还能开发 iOS、Android 的移动…
阅读更多...
VS2019安装和使用教程

VS2019安装和使用教程

提示&#xff1a;安装过程请保持网络流畅。 安装篇 首先需要去官网下载安装工具&#xff1a;点击此处跳转 跳转到官网后&#xff0c;如下图所示&#xff0c;点击社区模块的免费下载&#xff0c;之后应该会自动下载安装工具&#xff0c;如果没有自动下载&#xff0c;可以根据提…
阅读更多...
Visual Studio 2019/2017 安装使用教程（快速上手版）

Visual Studio 2019/2017 安装使用教程（快速上手版）

Visual Studio 2017 安装使用教程&#xff08;详细&#xff09;在此鸣谢范华对本文工作的大力支持 一.下载二.安装 2017版本新建项目过程2019版本新建项目过程新建源文件然后你就可以简单编写一段代码测试一下啦三.特殊问题解决 1.运行闪退2.预编译头错误3.scanf错误四.运行及调…
阅读更多...
Visual Studio 2017安装教程

Visual Studio 2017安装教程

目录 前言 Visual Studio的安装 Visual Studio中的“项目”和“解决方案” HelloWorld程序&#xff08;单项目&#xff09; 简易连加器程序&#xff08;多项目&#xff09; 前言 Visual Studio是微软&#xff08;Microsoft&#xff09;为以Windows为主的平台开发的一套功能…
阅读更多...
visual studio新手使用教程

visual studio新手使用教程

目录 1.下载安装Visual Studio 2.新建工程 3.新建项目 4.添加源文件 5.编译一闪而退的问题 6.使用scanf函数报错问题 7.VS常用调试程序快捷键 8.VS的调试窗口 9.工具->选项 对于刚刚接触编程的新手来说&#xff0c;最先需要熟练掌握的当然是语言之祖——C语言&…
阅读更多...
推荐文章

Copyright @ 2022~2023