您的位置:首页 > 编程语言 > Qt开发

QT 给界面添加背景图片

2013-06-10 11:46 696 查看
如何通过QT Creator创建菜单,添加图标和背景图片 - 转载

安装一.

首先创建一个project. New->QT4 Gui Application.

创建完毕后,点击XXX.ui,开始添加菜单:双击左上角的”Type Here”进行编辑,编辑完后回车(回车很重要),

回车后就会出现下拉菜单,继续类似编辑。Ok,

菜单编辑完成了,界面的Action Editor就会有你添加的内容,如下.

第二步,给菜单添加图标。

这里我们就需要创建资源文件了,

选择New->QT Source File(注意必须要有Pro文件与之匹配),安装。

创建完成后可以看到Porject里面多了一个资源文件:XXX.qrc.选择资源文件,

点击Add->Add Prefix1, 后继续Add Files.将你需要的ICO文件,图片都添加到资源文件中,添加完成后保存。

继续选择XXX.ui,双击Action Editor的某项,点击”Icon”的” Choose Resource” 选择你想要的图标,点击OK完成.效果如下(我都用的同一图标):

第三步,给窗体加背景.

单击右键->Change styleSheet,

在弹出的”Edit Style Sheet”中点击” Add Source”->background image”,

选择想要添加的图片,点击OK,完成.

同样其他的控件也可以通过同样的方式添加.

二.

1. 程序中部件使用资源文件

a. 为工程新建Qt Resource file

b. 打开资源文件,新建profix,比如取名为"/"

c. Add files: 添加你的图片文件

d. 在程序中要使用的地方用如下方式使用: QPixmap pixmap(urlInfo.isDir()? ":/dir.png":":/file.png"); item->setIcon(0,pixmap);(注意:前面有个冒号“:”,不要忘记哦)

2.windows下为可执行程序添加图标:(参考帮助文档中的<<Setting the Application Icon>>)

a. 找一个图表文件放在工程目录, 如"qq.ico"

b. 在工程目录下添加一个*.rc文件,如"myproject.rc"

c. 在myproject.rc文件中添加如下内容: IDI_ICON1 ICON DISCARDABLE "qq.ico"

d. 在qt的工程文件(*.pro文件)中添加如下内容: RC_FILE = myproject.rc OK,编译工程,看看生成的可执行程序的图标是不是变了!!!

QT笔记(3)-Qt中添加背景图片的方法

工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和QPushButton,QFrame做主面板,QPushButton为其子控件,需要在主面板上贴背景图片,还需要在QPushButton上贴上相应的图标,弄了一天,再加上今天一小会,终于有一点点结果了



通过从Google上搜索各种方法(现在才知道Google比Baidu强大很多啊),最后都试了一些,主要有下面几种方法:

1. QPalette的方法

#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));

frame->setPalette(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();

}

效果如下:



注:图标效果不错吧~_~

好了,今天就写到这里,以后有新的内容再补充。

补充,这样就可以让图片跟窗口一样大小了。

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();

}

上面的东西挺不错的
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: