Qt:设置背景图片的三种方式(setAutoFillBackground)

本文介绍在Qt中设置QWidget、QPushButton的背景图片的方法,包括使用QPalette、setStyleSheet和paintEvent事件,并通过示例代码展示不同方法的实现效果。
注意事项:路径不支持 绝对路径 例如:F:\qt\image\a.jpg  背景被刷为黑色
补充:设置背景颜色 palette.setColor(QPalette::Background, QColor(192,253,123));

1. QPalette的方法

基本步骤:

首先设置autoFillBackground属性为真

然后定义一个QPalette对象

设置QPalette对象的背景属性(颜色或者图片)

最后设置QWidget对象的QPalette

QWidget *widget=new QWidget;

widget->autoFillBackground(true);

QPalette palette;

palette.setColor(QPalette::Background,QColor(192,253,123));

//palette.setBrush(QPalette::Background,QBrush(QPixmap(":/background.png")));

widget->setPalette(palette);


#include <QApplication>
#include 
<QtGui>

int main(int argc, char *argv[])
{
 QApplication app(argc,argv);
 
 QFrame 
*frame = new QFrame;
 frame
->resize(400,700);
 QPixmap pixmap(":/images/frame.png");//设定图片
 QPalette palette;//创建一个调色板对象
 palette.setBrush(frame
->backgroundRole(),QBrush(pixmap));
//用调色板的画笔把映射到pixmap上的图片画到frame.backgroundRole()这个背景上
//palette.setColor(frame->backgroundRole(),QColor(192,253,123));
 frame->setPalette(palette);//设置窗口调色板为palette,窗口和画笔相关联
 frame->setMask(pixmap.mask()); //可以将图片中透明部分显示为透明的
 frame->setAutoFillBackground(true);//设置窗体自动填充背景
 frame->show();

 
return app.exec();
}
注意图片路径怎么表示,我的图片放在该工程下的images文件夹中。
存在问题:图片可以显示出来,但是图片大小不能和frame大小一致,显示效果不好,具体怎样调整大小,以后再补充;


2.setStyleSheet方法(非常好用的方法)
#include <QApplication>
#include 
<QtGui>

int main(int argc, char *argv[])
{
 QApplication app(argc,argv);
 QFrame 
*frame = new QFrame;
 frame
->setObjectName("myframe");
 frame
->resize(400,700);
 frame
->setStyleSheet("QFrame#myframe{border-image:url(images/frame.png)}" );
 frame
->show();

 
return app.exec();
}

注意:很漂亮的效果吧~~注意代码中红线的部分噢,设置ObjectName后,才能保证setStyleSheet 只作用在我们的frame上,不影响其子控件的背景设置。之所以用border-image而不用background-image,还是上面的问题,用 background-image不能保证图片大小和控件大小一致,图片不能完全显示,这个以后再补充了,现在还没有找到方法。

3.paintEvent事件方法
//myframe.h文件
#ifndef MYFRAME_H
#define MYFRAME_H

#include <QWidget>
#include <QtGui>

class MyFrame public QWidget
{
public:
 MyFrame();
 void paintEvent(QPaintEvent *event);
};

#endif // MYFRAME_H

//myframe.cpp文件
#include "myframe.h"

MyFrame::MyFrame()
{
}

void MyFrame::paintEvent(QPaintEvent *event)
{
 QPainter painter(this);
 painter.drawPixmap(0,0,400,700,QPixmap("images/frame.png"));
}

//main.cpp文件
#include <QApplication>
#include <QtGui>

#include "myframe.h"

int main(int argc, char *argv[])
{
 QApplication app(argc,argv);
 
 MyFrame *frame new MyFrame;
 frame->resize(400,700);
 frame->show();

 return app.exec();
}
效果如下:

注:跟前面一样的效果吧,与前面的差别就是这个背景图片不随着窗口的大小而变化,因为它的固定大小被设置成(400,700)了。重写QWidget的paintEvent事件,当控件发生重绘事件,比如show()时,系统就会自动调用paintEvent函数。


好了,上面是三种设置背景图片的方法,下面我要说一个设置QPushButton的背景图片的方法,用的是setIcon方法(其实QPushButton设置背景图片也可以用前面三种方法的,不过现在这种Icon方法的看起来也不错)
#include <QApplication>
#include 
<QtGui>

int main(int argc, char *argv[])
{
 QApplication app(argc,argv);

 QFrame 
*frame = new QFrame;
 QPushButton 
* button0 = new QPushButton(frame);
 QPushButton 
* button1 = new QPushButton(frame);
 QPushButton 
* button2 = new QPushButton(frame);
 QPushButton 
* button3 = new QPushButton(frame);
 QPushButton 
* button4 = new QPushButton(frame);
 QPushButton 
* button5 = new QPushButton(frame);

 frame
->setObjectName("myframe");
 frame
->resize(400,700);
 frame
->setStyleSheet("QFrame#myframe{border-image:url(images/frame.png)}" );

 button0
->setGeometry(60,150,68,68);
 button1
->setGeometry(160,150,68,68);
 button2
->setGeometry(260,150,68,68);
 button3
->setGeometry(60,280,68,68);
 button4
->setGeometry(160,280,68,68);
 button5
->setGeometry(260,280,68,68);

 QIcon icon;
 QPixmap pixmap0(
"images/SMS.png");
 icon.addPixmap(pixmap0);
 button0
->setIcon(icon);
 button0
->setIconSize(QSize(68,68));
 button0
->setFixedSize(pixmap0.size());
 button0
->setMask(pixmap0.mask());


 QPixmap pixmap1(
"images/EMail.png");
 icon.addPixmap(pixmap1);
 button1
->setIcon(icon);
 button1
->setIconSize(QSize(68,68));
 button1
->setFixedSize(pixmap1.size());
 button1
->setMask(pixmap1.mask());


 QPixmap pixmap2(
"images/Contacts.png");
 icon.addPixmap(pixmap2);
 button2
->setIcon(icon);
 button2
->setIconSize(QSize(68,68));
 button2
->setFixedSize(pixmap2.size());
 button2
->setMask(pixmap2.mask());

 QPixmap pixmap3(
"images/Calendar.png");
 icon.addPixmap(pixmap3);
 button3
->setIcon(icon);
 button3
->setIconSize(QSize(68,68));
 button3
->setFixedSize(pixmap3.size());
 button3
->setMask(pixmap3.mask());


 QPixmap pixmap4(
"images/GoogleVoice.png");
 icon.addPixmap(pixmap4);
 button4
->setIcon(icon);
 button4
->setIconSize(QSize(68,68));
 button4
->setFixedSize(pixmap4.size());
 button4
->setMask(pixmap4.mask());


 QPixmap pixmap5(
"images/AndroidMarket.png");
 icon.addPixmap(pixmap5);
 button5
->setIcon(icon);
 button5
->setIconSize(QSize(68,68));
 button5
->setFixedSize(pixmap5.size());
 button5
->setMask(pixmap5.mask());


 frame
->show();

 
return app.exec();
}
效果如下:
QT笔记(3)-Qt中添加背景图片的方法
注:图标效果不错吧~_~

好了,今天就写到这里,以后有新的内容再补充。
补充,这样就可以让图片跟窗口一样大小了。
int main(int argc, char *argv[])
{
 QApplication app(argc,argv);
 
 QFrame 
*frame = new QFrame;
 frame
->resize(400,700);

 QImage image1;
 image1.load(
"images/frame1.jpg");
 QImage image2 
= image1.scaled(400,700);

 QPalette palette;
 palette.setBrush(frame
->backgroundRole(),QBrush(image2));
 frame
->setPalette(palette);
 frame
->setMask(pixmap.mask()); //可以将图片中透明部分显示为透明的
 frame->setAutoFillBackground(true);
 frame
->show();

 
return app.exec();
}
<think> 我们参考多个资料,总结在Qt Widget中设置背景图片的几种方法: 1. 使用样式表(CSS)方法(引用[2]和引用[5]) - 可以直接在Qt Designer中设置样式表,也可以通过代码设置。 - 示例代码: ```cpp // 设置指定名称的QWidget的背景图片 ui->widget->setStyleSheet("QWidget#WidgetName { border-image: url(:/images/background.jpg); }"); ``` - 注意:使用border-image会拉伸图片填充整个控件。如果要避免影响子控件,需要给子控件单独设置背景(如透明或单独设置)。 2. 重写paintEvent方法(引用[3]) - 这是比较高效的方法,通过重绘事件来绘制背景图片。 - 步骤: a. 在头文件中声明paintEvent事件: ```cpp protected: void paintEvent(QPaintEvent *event) override; ``` b. 在cpp文件中实现: ```cpp void YourWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.drawPixmap(rect(), QPixmap(":/images/background.jpg")); } ``` 3. 使用调色板(QPalette)(引用[5]和引用[3]中的其他方法) - 示例代码: ```cpp QPalette palette; palette.setBrush(QPalette::Background, QBrush(QPixmap(":/images/background.jpg"))); this->setPalette(palette); ``` - 注意:这种方法可能需要先设置`setAutoFillBackground(true)`(引用[3])。 4. 设置透明背景(引用[4]) - 如果希望背景透明,可以使用以下方法: ```cpp // 方法1:使用调色板设置透明色 QPalette pal = palette(); pal.setColor(QPalette::Background, Qt::transparent); // 或者使用带透明度的颜色 setPalette(pal); ``` 或者 ```cpp // 方法2:设置窗口属性 setAttribute(Qt::WA_TranslucentBackground, true); ``` 注意:如果使用调色板或样式表设置背景图片,需要确保图片路径正确,并且资源文件已经添加到项目中。 总结: - 使用重绘事件(paintEvent)是最灵活高效的方法,尤其当需要自定义绘制时。 - 样式表方法简单易用,适合在Qt Designer中快速设置,但要注意不影响子控件。 - 调色板方法也是一种常用方法,但可能在某些情况下不如重绘事件灵活。 根据具体需求选择合适的方法。 §§相关问题§§ 1. 如何确保Qt Widget的背景图片不影响到子控件的背景? 2. 使用样式表设置背景图片时,如何让图片自适应控件大小? 3. 在Qt中,如何实现窗口的半透明效果? </think> ### Qt Widget设置背景图片的方法 在Qt中为Widget设置背景图片,主要有以下几种方法(参考站内资料): #### 1. **使用样式表(推荐)** [^2][^5] ```cpp // 方法1:直接设置控件样式 ui->widget->setStyleSheet("QWidget#yourWidgetName { border-image: url(:/images/bg.png); }"); ``` ```cpp // 方法2:设置图片平铺(自适应大小) QPalette palette; palette.setBrush(QPalette::Background, QBrush( QPixmap(":/bg.png").scaled(this->size(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation) )); this->setPalette(palette); ``` **特点**: - 简单直接,不影响子控件背景 - `#yourWidgetName` 需在Qt Designer中设置对象名 - 支持资源文件路径(`:/`)和本地路径 #### 2. **重写paintEvent(高性能)** [^3] ```cpp // 头文件声明 protected: void paintEvent(QPaintEvent *event) override; // CPP实现 void YourWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.drawPixmap(rect(), QPixmap(":/images/bg.jpg")); } ``` **特点**: - 性能最优,适合频繁刷新 - 需包含头文件`<QPainter>`和`<QPixmap>` - 自动适应窗口大小变化 #### 3. **使用QPalette调色板** [^3][^5] ```cpp this->setAutoFillBackground(true); // 必需 QPalette pale = this->palette(); pale.setBrush(QPalette::Background, QBrush(QPixmap(":/bg.jpg"))); this->setPalette(pale); ``` **注意**: - 必须调用`setAutoFillBackground(true)` - 可能被样式表覆盖(优先级较低) - 部分系统需要额外处理透明度 #### 4. **透明背景处理** [^4] ```cpp // 方法1:设置透明色 QPalette pal = palette(); pal.setColor(QPalette::Background, Qt::transparent); setPalette(pal); // 方法2:启用透明属性 setAttribute(Qt::WA_TranslucentBackground, true); ``` **应用场景**: - 实现不规则窗体 - 控件半透明叠加效果 - PNG图片透明通道支持 #### ⚠️ 注意事项 1. 图片路径使用资源系统(`:/prefix/image.ext`)避免路径问题 2. 优先使用`border-image`(样式表)或`paintEvent`保证自适应 3. 子控件背景需单独设置,否则可能继承父控件背景 4. PNG图片支持透明度,JPG需额外处理透明效果 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值