#（79）：QML 組件 前面我們簡單介紹了幾種 QML 的基本元素。QML 可以由這些基本元素組合成一個復雜的元素，方便以后我們的重用。這種組合元素就被稱為組件。組件就是一種可重用的元素。QML 提供了很多方法來創建組件。不過，本章我們只介紹一種方式：基于文件的組件。基于文件的組件將 QML 元素放置在一個單獨的文件中，然后給這個文件一個名字。以后我們就可以通過這個名字來使用這個組件。例如，如果有一個文件名為 Button.qml，那么，我們就可以在 QML 中使用`Button { … }`這種形式。 下面我們通過一個例子來演示這種方法。我們要創建一個帶有文本說明的`Rectangle`，這個矩形將成為一個按鈕。用戶可以點擊矩形來響應事件。 ~~~ import QtQuick 2.0 Rectangle { id: root 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.qml，放在 main.qml 同一目錄下。這里的 main.qml 就是 IDE 幫我們生成的 QML 文件。此時，我們已經創建了一個 QML 組件。這個組件其實就是一個預定義好的`Rectangle`。這是一個按鈕，有一個`Text`用于顯示按鈕的文本；有一個`MouseArea`用于接收鼠標事件。用戶可以定義按鈕的文本，這是用過設置`Text`的`text`屬性實現的。為了不對外暴露`Text`元素，我們給了它的`text`屬性一個別名。`signal clicked`給這個`Button`一個信號。由于這個信號是無參數的，我們也可以寫成`signal clicked()`，二者是等價的。注意，這個信號會在`MouseArea`的`clicked`信號被發出，具體就是在`MouseArea`的`onClicked`屬性中調用個這個信號。 下面我們需要修改 main.qml 來使用這個組件： ~~~ import QtQuick 2.0 Rectangle { width: 360 height: 360 Button { id: button x: 12; y: 12 text: "Start" onClicked: { status.text = "Button clicked!" } } Text { id: status x: 12; y: 76 width: 116; height: 26 text: "waiting ..." horizontalAlignment: Text.AlignHCenter } } ~~~ 在 main.qml 中，我們直接使用了`Button`這個組件，就像 QML 其它元素一樣。由于 Button.qml 與 main.qml 位于同一目錄下，所以不需要額外的操作。但是，如果我們將 Button.qml 放在不同目錄，比如構成如下的目錄結果： ~~~ app |- QML | |- main.qml |- components |- Button.qml ~~~ 那么，我們就需要在 main.qml 的`import`部分增加一行`import ../components`才能夠找到`Button`組件。 有時候，選擇一個組件的根元素很重要。比如我們的`Button`組件。我們使用`Rectangle`作為其根元素。`Rectangle`元素可以設置背景色等。但是，有時候我們并不允許用戶設置背景色。所以，我們可以選擇使用`Item`元素作為根。事實上，`Item`元素作為根元素會更常見一些。