# QT Example ## VS 2015 + Qt 5.11 ## 簡單範例 ### 1. 新建專案 ![](https://i.imgur.com/E3m0Eia.png) ![](https://i.imgur.com/LOYG5xB.png) ![](https://i.imgur.com/AohgaDO.png) ### 2. 檔案總管 ![](https://i.imgur.com/l3L7PFi.png) * main.cpp 是程式進入口,先不用管 * 主要程式寫在 QtWidgetsApplication1.cpp ![](https://i.imgur.com/jTgvvny.png) * 先執行看看 ![](https://i.imgur.com/ERVBE8M.png) ### 3. 簡易 UI 編寫 * 可以執行後雙擊 ui 檔 ![](https://i.imgur.com/GiW6Cfb.png) * 會打開 UI 設計界面 ![](https://i.imgur.com/etxZZUS.png) * 先拉個按鈕上去 ![](https://i.imgur.com/my4wGts.png) * 表單 > 檢視程式碼 ![](https://i.imgur.com/N0feMW2.png) * 點左上角的存檔圖示,直接存檔 ![](https://i.imgur.com/s68fYha.png) * 存檔後回到 VS,在檔案總管的 Header File > 右鍵 > 加入現有項目 ![](https://i.imgur.com/5ZXphxb.png) * 選擇剛剛存檔的 UI.h 檔 ![](https://i.imgur.com/gYzHtd8.png) * (補充) 剛剛拉的按鈕物件名稱叫 pushButton ![](https://i.imgur.com/0MjizYX.png) * 瀏覽 Ui.h 檔會看到以下程式碼,代表他已經幫你把 UI 的部份寫好了 ![](https://i.imgur.com/rWyk0Ky.png) * 確認 QtWidgetsApplication1.h 有 Include UI 檔 ![](https://i.imgur.com/v21fSNJ.png) * 回到 cpp 檔,加入 ``` c++ connect(ui.pushButton, SIGNAL(pressed()), this, SLOT(clicked())); ``` ![](https://i.imgur.com/wZeLagy.png) connect(物件名稱, SIGNAL(pressed()), this, SLOT(呼叫函式)); pressed() 是指按鈕按下去定會觸發的訊號,有其他的訊號,要看文件 * 切換到 .h 檔,加入 ``` c++ private slots: void clicked(); ``` ![](https://i.imgur.com/Q5CMr9j.png) 代表定義 SLOT 有 clicked() 可以接收事件 * 切回 cpp 加入 ``` c++ void QtWidgetsApplication1::clicked() { QMessageBox msgBox; msgBox.setWindowTitle("Msg"); msgBox.setText("Hello World!!!"); int ret = msgBox.exec(); } ``` 記得開頭加上 #include <QMessageBox> ![](https://i.imgur.com/bFvTmH0.png) * 執行 ![](https://i.imgur.com/VKUQ0XF.png) ### 結尾 這樣就是一個基本的寫法 我是將寫好的模組(Source.cpp + Header.h) 加入到檔案總管裡 ![](https://i.imgur.com/aqopw4w.png) 然後在QtWidgetsApplication1.h 裡 include ![](https://i.imgur.com/coH4Lny.png) 就能直接呼叫函式來用 ![](https://i.imgur.com/mi13Kmd.png) ## 開啟其他視窗 ### 1.製作新視窗的 UI * 這裡用 Dialog 來示範 ![](https://i.imgur.com/UgaSdoT.png) * 建好之後元件拉一拉,與上面的步驟一樣 ![](https://i.imgur.com/q19nme7.png) * 存檔後也要儲存成 .h 檔(這裡範例為 Ui_GenSB.h),一樣加入檔案總管 ![](https://i.imgur.com/39Wtd7D.png) * 然後在主視窗的 .h 檔 include ![](https://i.imgur.com/SOIxI33.png) ### 2.呼叫 UI * 函式 ![](https://i.imgur.com/aZmvDVg.png) ![](https://i.imgur.com/K3CdMBV.png) destoryAllWindow() 別理他 * 若要讓新視窗的元件上的值可以在原本視窗上使用就要像這樣 ![](https://i.imgur.com/aZmvDVg.png) 一開始就定義 ### 3.執行看看吧!! ![](https://i.imgur.com/Lr25u7F.png)