linwebs

林林.台灣 | Linwebs - 課程

Qt圖形化介面程式開發 - (3)Qt Creator 介紹與使用

本文章為嘉大資工讀書會第二期課程內容
場次 1-1 【跨平台圖形化程式設計開發(一)】 Qt圖形化介面程式開發

Qt Creator 是專為使用 C++ 開發 Qt 程式所設計的一套 IDE (整合開發環境),接下來我們將建立一個新專案來撰寫程式,並將此專案建置成執行檔。

  1. 首次開啟 Qt Creator,可看到畫面下方的提示訊息,點選【Link with Qt】連結 Qt 套件。
  2. 點選右方的【瀏覽】選擇 Qt 版本資料夾。
  3. 點選【Qt5.12.10】這個資料夾後,點選右下方的【選擇資料夾】。
  4. 確認路徑為 Qt 安裝資料夾內的【Qt5.12.10】這個資料夾後,點選【Link with Qt】進行連結。
  5. 點選【Restart Now】重新啟動 Qt Creator。
  6. 等待 Qt Creator 重新開啟後,點選畫面左方的【歡迎】>【Projects】專案。
  7. 點選上方 Projects 旁的【+ New】新增專案。
  8. 此步驟為選擇專案的樣本來建立專案,選擇完畢請點選【Choose...】進行下一步。
    左方的專案,請選擇【Application (Qt)】,表示要建立一般的 C++ Qt 專案
    中間請選擇【Qt Widgets Application】,表示建立 Qt 視窗程式 (下方的選項為建立 Console 程式,僅終端機介面,無 GUI 圖形化介面)
    右方為選項的說明
  9. 首先,先指定專案的名稱以及其儲存位置,設定完畢,請點選【下一個(N)】。
  10. 接下來,指派建構系統,在此使用預設的 qmake 做為 build system,設定完畢,請點選【下一個(N)】。
  11. 接下來,指定專案主程式的細節,設定完畢,請點選【下一個(N)】。
    Class name 為程式執行時,第一個開啟的視窗 class。
    Header file 為此 class 標頭檔的檔名
    Source file 為此 class 的檔名
    Form file 為此 class 所對應的 UI 介面配置檔檔名
  12. 接下來,設定專案的語系檔,在此先不做設定,請直接點選【下一個(N)】。
    Qt 可方便的開發多國語系的程式,若需開發支援多個語言的程式,可在此做設定。
  13. 接下來,設定專案的開發套件,選擇完畢,請點選【下一個(N)】。
    Desktop Qt 5.12.10 MinGW 32-bit 與 Desktop Qt 5.12.10 MinGW 64-bit 都是 Qt 開發 Windows 作業系統程式的開發套件,版本是 Qt 5.12.10 版,編譯器是 MinGW ,兩者的差別在於 32-bit 可編譯 32 位元的 Windows 程式,64-bit 可編譯 64 位元的 Windows 程式。
  14. 最後,可在此設定是否要使用版本控制系統來管理此專案,在此先不使用,點選下方的【完成】以完成建立專案。
  15. 專案建立完畢後,可看到目前介面為程式碼編輯區,最左方的選單可切換【歡迎畫面】、【程式碼編輯區】、【UI設計區】、【Debug區】、【專案設定區】和【說明區】。
    左下方為程式建置的選項。
    接下來,往右一些的白色區域,左上方的區塊為專案結構,左下方為目前開啟的檔案列表,右方為程式碼編輯器。
  16. 打開【Forms】資料夾找到【mainwindow.ui】檔案,點兩下可用 UI 編輯器開啟此檔案。
  17. UI 設計區的左方為工具箱,可從此處拖曳元件至中間的畫面進行編排。
    中間的畫面為介面編排區,可透過點選的方式來調整畫面。
    右上方為此畫面中所有元件的列表。
    右下方為選取的元件的選項,可在此客製化元件的設定。
  18. 專案設定區的畫面,左邊可以選擇各個設定檔的配置,右方可針對每個配置的設定檔分別調整其項目。
    Qt 中的 Kit 翻譯成中文可以叫做套件,一個 Qt 專案可建立多個編譯設定檔,預設會將系統中可用的 Kit 配置一份設定檔道專案中,因此可分別設定其編譯的參數(像是可配置輸出桌面程式、手機程式等)
  19. 接下來,將程式碼進行編譯,編譯前,可點選【▶ 執行】按鈕上方的選項,展開可看到所有的編譯配置選項。
    第一欄可選擇要使用的 Kit,第二欄可選擇建置的模式。
  20. Qt Creator 建置的選項有三種,由上而下分別是【建置並執行】、【建置並執行,並在執行時進行偵錯】、【建置】。
  21. 當要建置專案時,必須儲存所有變更過的檔案,在此會提示是否要儲存檔案。
  22. 可在 Qt Creator 最下方的【4 編譯輸出】中看到編譯的結果,看到顯示正常離開則表示編譯成功。
    下一行會顯示編譯所花費的時間。
    如果剛才是點選【建置並執行】的選項,會一併開啟編譯好的程式,在此可看到程式正確的執行。

恭喜,您已完成 Qt 的 Hello World! 的建置了!

想要擁有舒適的開發環境,接下來可閱讀【Qt圖形化介面程式開發 - (4)Qt Creator 介面調校

建立時間:2021/4/25 PM 11:13
修改時間:2021/4/26 AM 3:53
作者: Linwebs

bookmark標籤

Linwebs 嘉大資工讀書會