QML组件调用疑问

camelback5

QML可以基于文件对组件进行调用，但是一直没有看明白调用的机制。比如我在原有的main.qml目录下在新建一个Button.qml，然后在main下使用Button。Button下我做了一个载有图片的方框，但运行的时候发现Button.qml的存在与否对整个运行过程没有影响，得到的始终是QML自带的Button组件。把Button.qml的内容复制到main.qml中，图片是可以正常加载的，所以不知道QML组件，豆子Qt学习之路2对QML组件的介绍。
基于文件的组件将 QML 元素放置在一个单独的文件中，然后给这个文件一个名字。以后我们就可以通过这个名字来使用这个组件。例如，如果有一个文件名为 Button.qml，那么，我们就可以在 QML 中使用Button { … }这种形式。



下面我们通过一个例子来演示这种方法。我们要创建一个带有文本说明的Rectangle，这个矩形将成为一个按钮。用户可以点击矩形来响应事件。

JavaScript

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()
        }
    }
}


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 来使用这个组件：






JavaScript

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
    }
}


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
    }
}

Joey_Chan

你说的这个组件实际上类似继承关系，那个qml文件名就是新的类名（这也是为什么规定第一个字母一定要大写），这个文件里面的根元素就是父类。

你可以把Button.qml改名叫CustomButtom.qml，避免和qttuick control的button冲突