【Raspberry Pi 4 x Qt Creator x 按鈕的吶喊 – 01】設計Raspberry Pi 4的人機互動介面

使用拖拉放三步驟完成Raspberry Pi 4的人機互動介面設計，讓你的作品不只是Prototype!

當你用Raspberry Pi做了一個概念很棒的Prototype，不論是自己玩賞用，還是要做成產品，都需要有對使用者友善且好看的人機互動介面。本文中將教大家如何在Raspberry Pi 4上安裝Qt Creator，並製作你的第一個人機互動介面。

本文大綱

• 在Raspberry Pi4上安裝Qt Creator
• 設定Qt Creator
• 使用Qt Creator製作第一個人機互動介面
• 延伸參考資料

在Raspberry Pi4上安裝Qt Creator

Step 1. 先打開terminal更新APT(Advanced Packaging Tools)軟體套件管理器，並重新啟動Raspberry Pi 4。

sudo apt-get update
sudo apt-get upgrade
sudo reboot

Step 2. 接著輸入以下指令安裝cmake、Qt5、Qt Creator

sudo apt-get install cmake
sudo apt-get install -y qt5-default qtcreator

Step 3. 安裝完後就可以在「Programming/軟體開發」裡看到安裝好的Qt系列

Image may be NSFW.
Clik here to view.

設定Qt Creator

Step 4. 點選表單中的Qt Creator後，會看到以下畫面：

Image may be NSFW.
Clik here to view.

Step 5. 設定編譯工具，點選主選單中的「Tools/工具」，選擇最下面「Options/選項」。

Image may be NSFW.
Clik here to view.

Step 6. 跳出以下畫面後，選擇左側的「Kits」

Image may be NSFW.
Clik here to view.

Step .7 點選「Desktop(default)/桌面(default)」後，要來設定GCC跟G++編譯器位置。

在「Compiler」後的「C」以及「C++」選擇列表中的第一個編譯器。

Image may be NSFW.
Clik here to view.

Step 8. 設定完如下圖，Device記得設定為Local PC，系統會自動去抓你剛剛安裝的cmake。

Image may be NSFW.
Clik here to view.

Step 9. 如果想要添加其他新編譯器以供選擇，可以到「Compilers」頁面點選「Add」添加新編譯器名稱及路徑，如下圖所示。想當年舊版Qt Creator都要自己先完成這步驟，才能去設定Kits。

Image may be NSFW.
Clik here to view.

Step 10. 完成上述步驟後，就可以點選右下角的「Apply」、「OK」即設定完成並離開設定畫面。

使用Qt Creator製作第一個人機互動介面

完成設定後，要來製作一個簡單的人機互動介面測試設定是不是成功讓程式能正常運作。本範例會帶大家設計一個會跟你互動的按鈕，讓使用者點選按鈕，按鈕上會顯示不一樣的文字內容。

Step 11. 首先，點選畫面左上方的「Welcome」，再點選「Projects」中的「New Project」。

Image may be NSFW.
Clik here to view.

Step 12. 選單中有不同種類的Qt應用程式可以選，我們要選擇第一個「Qt Widgets Application」來自行設定使用者介面。下方的「Qt Console Application」會沒有使用者介面可以設定，想要玩玩看「Quick」系列也可以之後嘗試看看。

Image may be NSFW.
Clik here to view.

Step 13. 選完專案的種類，就要幫專案取名以及選擇儲存專案的位置，本範例中名稱取為「Click_Me」，路徑為預設值。

Image may be NSFW.
Clik here to view.

Step 14. 由於這個專案是測試環境用，接下來的三個步驟都套用預設值，點選「Next」、「Next」、「Finish」。

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

到這個步驟的完整畫面如下圖。

Image may be NSFW.
Clik here to view.

Step 15. 左手邊的欄位中就是整個專案的架構以及檔案，基礎的架構會包含「Click_Me.pro」、「mainwindow.h」、「main.cpp」、「mainwindow.cpp」、「mainwindow.ui」。如果前面你的「Class name」沒有選用預設值，mainwindow這串文字會是你的「Class name」。

Image may be NSFW.
Clik here to view.

Step 16. 接下來試試看可不可以成功執行Qt Creator提供的預設程式。點選左手邊的「Projects」，取消勾選「General」底下的「Shadow build」。

Image may be NSFW.
Clik here to view.

Step 17. 點選主選單中的「Build」中的「Run qmake」，執行完畢後點選同一個選單中的「Build All」。

Image may be NSFW.
Clik here to view.

Step 18. 完成build之後，點選左下角的電腦圖示，選擇「Release」。接著點選下方的綠色箭頭執行。

Image may be NSFW.
Clik here to view.

畫面中跳出一個空蕩蕩的視窗就代表環境設置成功了！

Image may be NSFW.
Clik here to view.

上述的環境測試執行若失敗，可以試試看以下解法：

點選主選單中的「Help」最下方的「About Plugins」。

Image may be NSFW.
Clik here to view.

取消勾選Clang的任何plugins，再重新開啟Qt Creator就可以了！

Image may be NSFW.
Clik here to view.

Step 19. 確認環境設定沒問題後，就是最令人期待的設計介面環節！將剛剛產生的視窗關閉後，我們點選「Forms」中的「mainwindow.ui」進入以下畫面。分區細節如圖。

Image may be NSFW.
Clik here to view.

Step 20. 我們將從「元件區」中拖曳一個「Push Button」到「設計介面區」。如果找不到元件，可以在「元件區」的最上方「Filter」欄位輸入關鍵字查詢。拖曳後，調整元件大小及位置如下圖，並將文字改成「Click Me」。

Image may be NSFW.
Clik here to view.

Step 21. 對著按鈕點右鍵，選擇「Go to slot…」後，會出現「Select signal」的頁面，我們選擇「clicked()」並點選「OK」。

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Step 22. 畫面會自動跳到「mainwindow.cpp」的頁面並幫你新增一個「on_pushButton_clicked」區塊。

Image may be NSFW.
Clik here to view.

Step 23. 請在此區塊的大括號之間加入以下程式。讓按鈕在被按的時候用文字吶喊，再被點選第二次時又再度恢復正常。你也可以改成你喜歡的文字內容。

Image may be NSFW.
Clik here to view.

Step 24. 寫完上述程式，就可以點選綠色箭頭執行「Run」，並看到以下畫面。

來體驗按鈕的吶喊吧！

Image may be NSFW.
Clik here to view.

對更多Qt Creator的撰寫程式細節有興趣，想體驗更多Qt Creator魅力的你，請持續關注Raspberry Pi 4 + Qt Creator的系列文章！

延伸參考資料

Qt Creator 官方論壇：https://forum.qt.io/