K02-03加點料-增加一張圖片

版權聲明

該文章原創于Qter開源社區
作者： 女兒叫老白
轉載請注明出處！

網頁版課程源碼 提取碼：1uy7

引言

  既然是界面編程，自然離不開圖片，比如在按鈕上使用文字太枯燥了，使用圖標是不是會更好呢？今天，我們來討論一下如何在Qt項目中使用圖片。

正文

   既然要使用圖片，自然離不開圖片啦。那么圖片在哪呢？

百度！相信是很多人的第一反應。但是您知道嗎，從網上找到的圖片，有時候用Qt進行加載會失敗（原因待查，未深究）。小編自己都是使用公司的專業美工制作的圖片。所以，最好的辦法還是請美工制作，而且這樣做就不會有版權問題啦。
那么把圖片（大象）放到項目（冰箱）中一共分幾部呢？就像某著名演員說的一共分3步：
第一步，把圖片放到images目錄（打開冰箱門）。
第二步，將圖片添加到xxx.qrc文件，并將qrc文件添加到pro（把大象放進去）
第三步，在界面、代碼中引用圖片

我們分別來看一下。
第一步，把圖片放到images目錄：拿到需要的圖片后，我們把它放到images目錄。這個目錄屬于我們項目的子目錄，比如我們的項目的代碼目錄為ks02_03，那么就在這個目錄下面建立子目錄images：
ks02_03目錄
--- images(子目錄)
---源代碼1.cpp
---源代碼2.cpp

          第二步，將圖片添加到xxx.qrc文件，并將qrc文件添加到pro。qrc是Qt的資源描述文件，women 可以把用到的圖片在該文件中進行描述。我們來看一下qrc文件的格式： 

代碼清單:

// ks02_03.qrc
<!DOCTYPE RCC><RCCversion="1.0">
<qresource>
<file>images/logo_text.png</file>
</qresource>
</RCC>

   請注意，<file>一行的內容就是我們增加的圖片，如果還有別的圖片，可以再寫一行，只是把logo_text.png換成對應的文件名即可。另外，請注意，我們使用的是相對路徑：
   images/logo_text.png
   images是我們已經建好的子目錄，前面無需寫其他內容。
   然后，我們將ks02_03.qrc添加到pro文件，只需要加一行：

   RESOURCES      +=ks02_03.qrc

第三步，在界面、代碼中引用圖片。比如為文本標簽（QLabel）設置一個圖標（圖片），我們一般會在designer中選擇該按鈕，為它設置圖片：修改pixmap屬性，并設置為準備好的圖片。請注意，選擇圖片時，請用編輯框右側的"…"按鈕。
如果是在代碼中為按鈕設置圖片，方法如下：
label->setPixmap(QPixmap(":/images/qt.png"));
請注意，描述圖片文件路徑時，我們使用的是":/images/qt.png"，要注意路徑開頭的冒號。
好了，編譯一下程序并運行起來吧。祝大家好運！
結語

本節課，我們討論了向項目中添加圖片的方法和過程，現在我們來總結一下要點：
   1， 使用圖片時，盡量請公司的美工制作。避免使用網上的圖片，有時候Qt無法識別。
   2， 將圖片添加到項目一共分三步，
         第一步，將圖片放到images目錄，
         第二步，將圖片添加到qrc文件并將qrc文件添加到pro。
         第三步，在界面(ui文件)或代碼中引用圖片。

《Qt入門與提高-GUI產品開發》目錄
上一節:KS02-02 整理一下目錄吧
下一節:KS02-04 pro 文件常用配置