設計圖形使用者介面 (graphical user interface, GUI) 應用程式 (application) 的步驟如下

簡單的 GUI 程式不受此限，但是複雜一點的 GUI 程式按照這樣的步驟實際設計起來會比較輕鬆。

像是上個單元的物件層級 (object hierarchy) 範例， Window 是最外層的視窗

Window {

在 Window 這裡設定視窗尺寸及其他相關屬性，然後底下應該先進行版面編排 (layout) ，不過這裡簡化到 Buuton 裡面的 anchors.centerIn

anchors.centerIn: parent

anchors.centerIn 是讓 Button 放到指定視窗元件的中心位置， parent 就是指上一層視窗元件，在這個例子中就是 Window ，所以這個 Button 會出現在 Window 的正中央。

此外在這個例子中，除了選單列 MenuBar 之外，設定 Button 中的 onClicked 也就是建立這個 GUI 應用程式的實際功能

onClicked: {
    button.text = "按鈕"
}

MenuBar 及 Button 就是物件層級範例所加入的視窗元件。

回到我們編密碼的 Encrypt 類別 (class) ，預計的 GUI 如下圖

以視窗元件來看會是

簡單說就是一組表格，就術語來講這是格子狀的版面編排方式，我們已經上個單元的練習中見過數種格子版面編排方式，在 Encrypt 類別的 GUI 範例預計採用 Column 為直欄，然後在 Column 建立四個 Row 來放置上表中的視窗元件。

以下先看到 import 的部分，除了要先 import QtQuick 外，也要 import QtQuick.Controls ，因為下面用到的視窗元件，例如 TextField 、 Button 等都定義在 QtQuick.Controls 內，所以要先 import QtQuick.Controls

import QtQuick
import QtQuick.Controls

完整的 QML 檔案請參考「範例程式篇」的 encryptor_gui_demo/main.qml 。

接下來是把 Window 換成 ApplicationWindow ， ApplicationWindow 繼承 (inherit) 自 Window ，同樣定義在 QtQuick.Controls 中

ApplicationWindow {
    id: root
    width: 350
    height: 120
    visible: true

    title: qsTr("編密碼小工具")

以上設定了 id 、 width 、 height 、 visible 及 title 等屬性，基本設定跟 Window 一樣， ApplicationWindow 相較 Window 支援更多的 Controls 視窗元件，功能也更豐富。

繼續是 Column 有 4 個 Row ，每一個 Row 都是一個橫列

Column {

下面看到第一個 Row ，裡頭有一個 Text 及一個 TextField

Row {
    width: 350
    height: 25

    Text {
        width: 50
        horizontalAlignment: Text.AlignRight
        text: qsTr("輸入:")
    }

    TextField {
        id: input
        width: 300
        color: "blue"
        placeholderText: qsTr("輸入英文句子")
        text: ""
    }
}

其中， Text 的 horizontalAlignment 設定為 Text.AlignRight ，這是讓文字在 50 的寬度內向右對齊，因此 Text 的文字緊接右側的 TextField ，對齊也就是設定樣式 (style) ，基本上樣式多半由屬性來設定

horizontalAlignment: Text.AlignRight

然後注意到 TextField 的顏色 color 設定為 "blue" ，這是藍色的意思，文字顏色也是樣式，因此使用者輸入的文字會是藍色

color: "blue"

placeholderText 則是設定預設的提示文字，這裡提示使用者輸入「輸入英文句子」

placeholderText: qsTr("輸入英文句子")

繼續看到第二個 Row 中的 Text 與 TextField ，由於 Text 大部分都相同，我們集中看到有不一樣的 TextField 部分

TextField {
    id: output
    width: 300
    color: "red"
    placeholderText: qsTr("這裡顯示編碼結果")
    readOnly: true
    text: ""
}

顏色設定為 "red" ，也就是顯示文字會是紅色

color: "red"

預設的提示文字為「這裡顯示編碼結果」

placeholderText: qsTr("這裡顯示編碼結果")

另外將 readOnly 設定為 true ，這是因為這個 TextField 用作顯示結果，因此設定為唯獨

readOnly: true

第三個 Row 是七個按鈕，每個按鈕都先用類似的設置

Row {
    width: 350
    height: 35

    Button {
        id: newButton
        width: 50
        text: qsTr("新建")

        onClicked: {
            display.text = qsTr("新建按鈕")
        }
    }

這裡每一個按鈕都設定成按下之後，在底下的 Text 顯示按下的按鈕名稱，注意這裡是呼叫底下 Text 的 id

onClicked: {
    display.text = qsTr("新建按鈕")
}

最後一個 Row 就只有一個 Text ， id 為 display

Row {
    width: 350
    height: 50
    Text {
        id: display
        width: 350
        text: qsTr("提示訊息")
    }
}

目前版本執行如下圖

輸入文字，按下編碼按鈕如下圖

GUI 就用 QML 建立好了，接下來要先建立 EncryptController 類別，以便後續整合 Encrypt 類別，讓我們 Encrypt 類別的 GUI 具有實際編碼及解碼的功能。

相關教學影片

• 利用 QML 設計介面與觸發按鈕方法 ⇨ YouTube 頁面連結