---
# System prepended metadata

title: QT Example
tags: [C++, tutorials, 程式語言]

---

# 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)

