2.3 案例3 加点料-增加一张图片
本案例对应的源代码目录:src/chapter02/ks02_03。程序运行效果见图2-21。
图2-21 案例3运行效果
既然要进行界面编程,自然离不开图片。如果认为在按钮上使用文字太枯燥了,那么使用图标是不是会更好呢?本节讨论一下如何在Qt项目中使用图片。
既然要用图片,自然离不开图片文件啦。那么图片在哪里找呢?百度!相信是很多人的第一反应。但是,从网上找到的图片在用Qt进行加载时可能会失败(原因待查,未深究),而且可能导致版权问题。所以,从网上找图片的办法不太靠谱。有规模的软件公司一般都会请专业美工来制作图片,而且这样也不会有版权问题啦。
那么把图片(大象)放到项目(冰箱)中一共分几步呢?就像某著名演员说的,一共分3步。
(1)把图片放到images目录(打开冰箱门)。
(2)将图片文件名添加到xxx.qrc文件,并将qrc文件添加到pro(把大象放进去)。
(3)在界面、代码中引用图片(把冰箱门关上)。
下面详细介绍一下开发过程。
1.把图片放到images目录
拿到需要的图片后,把它放到images目录,这个目录是项目的子目录。如果项目的代码目录为ks02_03,那么就在ks02_03目录下面建立子目录images,并将图片放入该目录。
ks02_03目录
--- images(图片子目录)
---源代码1.cpp
---源代码2.cpp
2.将图片文件名添加到xxx.qrc文件,并将qrc文件添加到pro
qrc文件是Qt的资源描述文件,可以把用到的图片在该文件中进行描述。现在看一下qrc文件的格式(见代码清单2-11)。
代码清单2-11
// ks02_03.qrc <!DOCTYPE RCC> <RCC version="1.0"> <qresource> <file>images/logo_text.png</file> ① </qresource> </RCC> |
代码清单2-11中标号①处的<file>这一行的内容被用来描述项目中用到的图片。如果还有别的图片,可以再写一行,只要把logo_text.png换成对应的文件名即可。另外,请注意使用相对路径:
images/logo_text.png |
images是项目的子目录,在images前面无须写其他内容。然后,将ks02_03.qrc添加到项目,只需要在pro文件加一行:
RESOURCES += ks02_03.qrc |
3.在界面、代码中引用图片
如果为文本控件(QLabel)设置一个图片,可以在Designer中单击该文本控件并在属性窗中为它设置图片,方法是:修改属性窗中的pixmap属性,并设置成事先准备好的图片。选择图片时,请用编辑框右侧的…按钮。
如果在代码中为QLabel设置图片,可以写成:
注意:描述图片文件路径时,使用的是“:/images/qt.png”,不要漏掉路径开头的冒号。
最后给应用程序加上控制菜单图标。方法很简单,首先准备一个图标文件my.ico,将其放到images目录。然后,修改pro文件:
RC_ICONS = images/my.ico |
OK,把程序构建一下并运行起来吧。
本案例介绍了向项目中添加图片的方法和过程,现在总结一下要点:
(1)需要图片时,尽量请专业美工制作。避免使用网上的图片,因为有些图片可能无法被Qt识别而且可能存在版权问题。
(2)将图片添加到项目一共分三步:
- 第一步,将图片放到images子目录。
- 第二步,将图片文件名添加到qrc文件并将qrc文件添加到pro。
- 第三步,在界面(UI文件)或代码中引用图片。
(3)为项目添加控制菜单图标的方法是在pro文件中设置RC_ICONS配置项。
(4)在代码中描述图片文件路径时,写成:
ui.label->setPixmap(QPixmap(":/images/qt.png")); |