林林.台灣 | Linwebs - 課程

Qt圖形化介面程式開發 - (5)BMI計算機開發

BMI 計算機可幫使用者針對輸入的身高體重參數，計算出對應的 BMI 數值，此專案使用到基本的文字輸入框及標籤等物件，對於熟悉 Qt 的用法是非常的有幫助。
※ 此篇文章前半部使用 TextEdit 作為輸入框，後半部改以 LineEdit 作為輸入框，此文章內容可能將在之後進行微調。

1. 建立一個新的專案
   
2. 點選【Forms】> 【mainwindow.ui】進行使用者介面的設計。
   
3. 請放置兩個 Text Edit 物件，讓使用者分別輸入身高與體重。
   請再放置兩個 Label 物件，顯示文字身高和體重。
   請再放置一個 Label 物件，顯示 BMI 的計算結果。
   
4. 請再放置一個 Push Button 物件，當使用者點按時，會在 Label 中顯示計算後的結果。
   
5. 點選剛才加入的按鈕，可在畫面右下方修改【objectName】。
   ObjectName 為物件名稱，物件名稱可視為其身分證字號，同一個畫面中，不可有兩個相同的 ObjectName，在撰寫程式碼時，我們會使用 ObjectName 來分別出每一個物件，故物件的命名是非常重要的。
   
6. 點選第一個 Text Edit，捲動畫面右下方，可在最後面看到【placeholderText】，將內容更改為【請輸入身高】，第二個 Text Edit，將 placeholderText 的內容更改為【請輸入體重】。
   placeholderText 為提示文字，可在使用者未輸入任何字元時，提示使用者。
   
7. 介面布局完畢後，接下來，將撰寫按鈕觸發時的程式碼，在【計算】的按鈕上按下滑鼠右鍵，點選【跳到信號槽...】。
   
8. Qt 提供許多信號槽的種類，在此選擇 QAbstractButton 中的 clicked() 事件，選擇完畢後點選【確定】按鈕。
   
9. Qt Creator 會自動跳至程式碼編輯器中，clicked 事件的位置，在此可撰寫當按鈕被點擊時，所要執行的程式。
   
10. 接下來，測試一下按鈕的功能，當點擊按鈕時，改變結果的內容。
    在 void MainWindow::on_pushButton_start_game_clicked() 這個函式內撰寫程式碼，撰寫程式時 Qt Creator 會提示目前畫面佈局中擁有的 UI 物件，若未在此列表中出現，請確認剛才修改【mainwindow.ui】後有儲存檔案，若仍無法出現時，可嘗試【專案】>【清理專案】的選項。
    
11. 當【計算】按鈕被按下時，顯示【結果: 0】在結果的標籤中。
    
12. 可看到執行的結果。
    
13. 接下來，來計算 BMI 的數值，首先我們先在 class 的 Header 檔加入 height 和 weight 兩個 private 的變數。
    
14. 接下來宣告一個 bmi_value 的變數，並取得輸入的內容，計算出 BMI 數值，並在結果視窗中顯示出來。
    

    ui->textEdit_height->toPlainText().toDouble();
    // 從 UI 的 textEdit_height 物件中取得純文字，再轉為 double 的型態

    
15. 可看到執行的結果。
    
16. 執行步驟與結果。
    
17. 接下來進行體位的判斷，提示使用者文字，判斷前，請確認使用者輸入的文字為數字，以免出錯。
    判斷是否輸入的文字為數字，將 bool 型態的變數帶入 toDouble() 函式中，可取得是否轉換成功。
    
18. 執行結果。
    
19. 現在，將 TextEdit 改為 LineEdit。
    
20. 將程式碼 25 及 32 行更改為 Line Edit。
    
21. 使用者輸入非數字時，可以中斷輸入，在此使用 Qt 提供的 QDoubleValidator 驗證輸入的文字為 double 的型態。
    
22. 執行結果。
    
23. 執行結果。
    

恭喜，您已完成 BMI 計算機，接下來可閱讀【Qt圖形化介面程式開發 - (6)賽車遊戲開發】