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设置图片，可以写成：

ui.label->setPixmap(QPixmap(":/images/qt.png"));

注意：描述图片文件路径时，使用的是“:/images/qt.png”，不要漏掉路径开头的冒号。

最后给应用程序加上控制菜单图标。方法很简单，首先准备一个图标文件my.ico，将其放到images目录。然后，修改pro文件:

RC_ICONS = images/my.ico

OK，把程序构建一下并运行起来吧。

本案例介绍了向项目中添加图片的方法和过程，现在总结一下要点：

（1）需要图片时，尽量请专业美工制作。避免使用网上的图片，因为有些图片可能无法被Qt识别而且可能存在版权问题。

（2）将图片添加到项目一共分三步：

1. 第一步，将图片放到images子目录。
2. 第二步，将图片文件名添加到qrc文件并将qrc文件添加到pro。
3. 第三步，在界面(UI文件)或代码中引用图片。

（3）为项目添加控制菜单图标的方法是在pro文件中设置RC_ICONS配置项。

（4）在代码中描述图片文件路径时，写成：

ui.label->setPixmap(QPixmap(":/images/qt.png"));

《Qt 5/PyQt 5实战指南》目录