千张笔记

Email:rain_qian830@163.com
posts - 28, comments - 42, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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

Posted on 2010-07-25 14:07 千张 阅读(30775) 评论(16)  编辑 收藏 引用 所属分类: 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();
}


Feedback

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-07-25 21:07 by guofu
不错 不错

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-07-26 11:09 by 孔雀
哥们你这个模拟器是symbian的还是android的?
看到你的贴图我都困惑了

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-07-26 13:06 by qianqian
@孔雀
I am a girl.
No symbian or android.
Just Linux and QT(Qt creator).
The phone frame is just a picture, not a simulator.

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-07-31 14:10 by QT fans
@qianqian
very good !! I like it!

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-07-31 14:12 by QT fans
可以留个 QQ一起交流吗?我q的是522190051 。

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-08-05 16:32 by qianqian
4、设置字体大小、粗体、斜体、颜色、背景的时候要注意:setFont可以设置,但是前提是没有用setStyleSheet函数  否则 setFont不起作用,同时还可以用html脚步<font></font>这样设置。  StyleSheet方法:textEdit->setStyleSheet("font-size:18px;""background-color:black;"   "border-style:solid;""font-style:italic;""font-weight:bold;""color:white");   setFont方法: QFont font;  font.setFamily("Bitstream Charter");  font.setPixelSize(16);  font.setBold(true);   font.setItalic(true);  textEdit->setFont(font);  html方法:textEdit->setText("<font color=red>abc</font>")  

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-09-28 10:44 by pacco
果断被忽悠了,竟然是个图,不是个模拟器?

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-09-28 11:24 by qianqian
@pacco
请你看清楚行么,我从来没说这是模拟器,我说了是qt添加背景图片的代码,而且我代码都贴出来了,你看得懂就该知道是怎么回事,看不懂不要在这乱说我忽悠谁,大哥,拜托你看清楚了再说话,我学习记笔记不算忽悠谁吧。

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-10-21 08:13 by 王文靖
很喜欢你的博客,简明得体,美观大方。以后小弟会多多参阅学习的。

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-11-01 17:39 by Hanmei
是在QVFB下还是直接环境下

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2010-11-08 15:18 by dou8615
我换了张图片试了一下程序,出现了QFrame和frame没有声明的问题,不知道怎么回事呢

# re: QT笔记(3)-Qt中添加背景图片的方法[未登录]  回复  更多评论   

2011-01-03 19:06 by yy
QPushButton 这里为什么不用layout呢?

# re: QT笔记(3)-Qt中添加背景图片的方法[未登录]  回复  更多评论   

2011-01-03 19:07 by yy
QPushButton为什么不用layout呢?

# re: QT笔记(3)-Qt中添加背景图片的方法  回复  更多评论   

2011-01-07 09:53 by 曾华山
QFrame是不是也可以用layout呢?没试过,有空在琢磨琢磨。。

# re: QT笔记(3)-Qt中添加背景图片的方法[未登录]  回复  更多评论   

2012-04-06 09:24 by
你好,我用3个button添加背景图,然而第三个button的图标老是显示不对,是第二个的图标,请问怎么改呀?

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理