本篇部落格的目的是簡單介紹：建立一個用QLabel類來顯示圖片的自定義控制元件的編寫。在寫自定義控制元件的過程中遇到了很多的難題，但都慢慢解決了，本人對Qt自定義控制元件的認識還不深刻，做的不對的地方，還請大家指出，我會盡快修改，免得誤導他人！

配置：Qt creator5.7，Qt 5.7+VS2013（64位）（有人喜歡用後者，全憑個人愛好，我用的是creator，本文也會關聯到後者的使用），本篇部落格是關於建立Qt自定義控制元件的內容，本篇案例的說明用的是Qt5.6，VS2013（因為本人的電腦裝的是Qt5.6，公司的電腦裝的是Qt5.7），建議最好用Qt5.7，但實際操作中不會有太大差別。

一、新建Qt4設計師自定義控制元件工程

1.開啟creator，按紅色箭頭所示，新建Qt4設計師自定義控制元件工程；

2.設定專案名稱，位置；

3.下一步預設就好；

4.雙擊修改控制元件類工程名稱（注：本篇博文所有是”CV“名稱命名，均採用的大寫符號），即可生成紅色箭頭所指的幾個檔案；

5.下一步，就會自動生成名為cvplugin的外掛，下面的步驟中會用到它；

6.至此就完成了新建Qt4設計師自定義控制元件工程，就會生成如圖所示的工程。

二、編寫自定義控制元件介面

既然是控制元件，就應該有介面，本篇部落格的目的是想建立一個繼承於QWidget類，並用QLabel類來顯示圖片的自定義控制元件；既然預設生成的控制元件類只是一個繼承了QWidget的類，只是一個空殼控制元件，所以你應該按如下的操作來為此控制元件新增內容。

1.為了簡單起見，我不想自己手動去寫這些介面相關的程式碼，為此我們可以先刪掉預設生成的cv.h和cv.cpp檔案，選中cv.h和cv.cpp檔案，右鍵選擇”刪除檔案“，並勾上”徹底刪除“選項，確定刪除即可；

2.這樣我們就可以重新使用”CV“這個名稱為此控制元件新增一個ui類了。在上圖所示的介面中選中CV專案，右鍵選擇“新增新檔案”，使用Qt下的“Qt設計師介面類”模板，建立一個ui類，如下圖所示：

3.選中Widget即可，其他全部預設；

4.寫上”CV“即可，點選下一步；

5.預設下一步；

6.至此就為自定義控制元件工程新增上了UI介面；

7.雙擊"cv.ui”，拖拽一個Label到介面上，並調整下大小，居中即可。在右邊的列表中可以看到label控制元件，因為想顯示圖片，所以用的肯定是屬於Display Widgets類的“QLabel”。這樣就為自定義控制元件CV添加了一個顯示圖片的類QLabel了，接下來就可以為這個“CV”工程構建.dll和.lib檔案了；

8.先將編譯器改為“Release”模式，然後執行下qmake，為什麼這樣，我也不是很清楚，你可以自己去查一下；

9.再點選那個綠色三角形按鈕，會彈出“自定義執行擋”，不要管，直接關閉即可（我查過好像是什麼介面，我也不是很清楚，畢竟也是接觸Qt不久），最後點選那個小錘子，等右下角那個綠色進度條變暗了，即可在你所建立的工程目錄下見到如圖所示的“build-CV-Desktop_Qt_5_6_0_MSVC2013_64bit-Release”外掛工程；

10.開啟該檔案，並找到如圖所示的兩個檔案“cvplugin.dll”、"cvplugin.lib”，將兩個檔案並拷貝到你安裝的Qt5.7的designer中（注意路徑！！！，根據自己安裝的進行），如下第二個圖所示。若想用“VS2013+Qt設計師”進行程式編寫的，你就要將兩個檔案“cvplugin.dll”、"cvplugin.lib”拷貝到如下第三個圖所示的路徑的資料夾下（注意路徑！！！，根據自己安裝的進行）；

11.最後你隨便在Qt creator 或 Qt設計師中 新建一個工程就可以在Widgets視窗中看到“CV”外掛了，於是你就可以想使用其他控制元件一樣來隨意使用“CV”了，這個控制元件目前的功能相當於“Label”控制元件（本次主要用來顯示圖片），當然你可以在建立的過程中為它新增任意想要的組合功能。

第二篇，“CV”外掛的使用。未完待續......