自定义Qml 组件

组件(Component)

组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码复用。作为程序员，我知道你懂的。组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。

例子：

建立一个颜色模块组件 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类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget。

然后在 main.qml 引用这个颜色模块组件,这里定义了一个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 }
    }
}

选择颜色模块组件来改变Hello world! 字体颜色。
最后效果如下图：

自定义颜色模块组件.PNG