組件(Component)

組件其實(shí)和其它編程語(yǔ)言中的宏，函數(shù)，類，結(jié)構(gòu)體等功能差不多，就是代碼復(fù)用。作為程序員，我知道你懂的。組件由一個(gè)單獨(dú)的QML文件名組成，文件名總是以大寫字母開(kāi)頭，要使用該組件的時(shí)候直接使用該文件名就可以了。

例子：

建立一個(gè)顏色模塊組件 ColorBlock.qml

import QtQuick 2.0

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(color cellColor)

    width: 40; height: 25

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }
}

Item是最常使用的QML類型，一般用作其它類型的容器，可以理解成最頂級(jí)的父類，功能類似于QtGui中的QWidget。

然后在 main.qml 引用這個(gè)顏色模塊組件,這里定義了一個(gè)2行3列的格布局。

import QtQuick 2.0

Rectangle {
    id: page
    width: 500; height: 200
    color: "lightGray"

    Text {
        id: helloText
        text: qsTr("Hello world!")
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

    Grid {
        id: colorPicker
        x: 4
        anchors.bottom: page.bottom
        anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        ColorBlock { cellColor: "red"; onClicked: helloText.color = cellColor }
        ColorBlock { cellColor: "green"; onClicked: helloText.color = cellColor }

        ColorBlock { cellColor: "blue"; onClicked: helloText.color = cellColor }
        ColorBlock { cellColor: "yellow"; onClicked: helloText.color = cellColor }

        ColorBlock { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        ColorBlock { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

選擇顏色模塊組件來(lái)改變Hello world! 字體顏色。
最后效果如下圖：

自定義顏色模塊組件.PNG