【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製作第一個人機互動介面
延伸參考資料

作者/攝影	蔡雨錡
時間	3小時
難度	★★★☆☆
材料表	Raspberry Pi 4(商城連結)

在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系列

設定Qt Creator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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