技術標籤：Qt

一個元件是一個可以重複使用的元素，QML提供幾種不同的方法來建立元件。但是目前我們只對其中一種方法進行講解：一個檔案就是一個基礎元件。一個以檔案為基礎的元件在檔案中建立了一個QML元素，並且將檔案以元素型別來命名（例如Button.qml）。你可以像任何其它的QtQuick模組中使用元素一樣來使用這個元件。在我們下面的例子中，你將會使用你的程式碼作為一個Button（按鈕）來使用。

讓我們來看看這個例子，我們建立了一個包含文字和滑鼠區域的矩形框。它類似於一個簡單的按鈕，我們的目標就是讓它足夠簡單。

Rectangle { // our inlined button ui
    id: button
    x: 12; y: 12
    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"
    Text {
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            status.text = "Button clicked!"
        }
    }
}

Text { // text changes when button was clicked
    id: status
    x: 12; y: 76
    width: 116; height: 26
    text: "waiting ..."
    horizontalAlignment: Text.AlignHCenter
}
 

使用者介面將會看起來像下面這樣。左邊是初始化的狀態，右邊是按鈕點選後的效果。


我們的目標是提取這個按鈕作為一個可重複使用的元件。我們可以簡單的考慮一下我們的按鈕會有的哪些API（應用程式介面），你可以自己考慮一下你的按鈕應該有些什麼。下面是我考慮的結果：

// my ideal minimal API for a button
Button {
    text: "Click Me"
    onClicked: { // do something }
}

我想要使用text屬性來設定文字，然後實現我們自己的點選操作。我也期望這個按鈕有一個比較合適的初始化大小（例如width:240）。 為了完成我們的目標，我建立了一個Button.qml檔案，並且將我們的程式碼拷貝了進去。我們在根級新增一個屬性匯出方便使用者修改它。

我們在根級匯出了文字和點選訊號。通常我們命名根元素為root讓引用更加方便。我們使用了QML的alias（別名）的功能，它可以將內部巢狀的QML元素的屬性匯出到外面使用。有一點很重要，只有根級目錄的屬性才能夠被其它檔案的元件訪問。

// Button.qml

import QtQuick 2.0

Rectangle {
    id: root
    // export button properties
    property alias text: label.text
    signal clicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}
 

使用我們新的Button元素只需要在我們的檔案中簡單的宣告一下就可以了，之前的例子將會被簡化。

Button { // our Button component
    id: button
    x: 12; y: 12
    text: "Start"
    onClicked: {
        status.text = "Button clicked!"
    }
}

Text { // text changes when button was clicked
    id: status
    x: 12; y: 76
    width: 116; height: 26
    text: "waiting ..."
    horizontalAlignment: Text.AlignHCenter
}

現在你可以在你的使用者介面程式碼中隨意的使用Button{ …}來作為按鈕了。一個真正的按鈕將更加複雜，比如提供按鍵反饋或者新增一些裝飾。

注意：可以更進一步的使用基礎元素物件（Item）作為根元素。這樣可以防止使用者改變我們設計的按鈕的顏色，並且可以提供出更多相關控制的API（應用程式介面）。我們的目標是匯出一個最小的API（應用程式介面）。實際上我們可以將根矩形框（Rectangle）替換為一個基礎元素（Item），然後將一個矩形框（Rectangle）巢狀在這個根元素（root item）就可以完成了。

Item {
    id: root
    Rectangle {
        anchors.fill parent
        color: "lightsteelblue"
        border.color: "slategrey"
    }
    ...
}

使用這項技術可以很簡單的建立一系列可重用的元件。