Qt QML第五章第四节：组件

组件

组件是可重用的元素。QML 提供了创建组件的不同方法。目前，我们只关注最简单的形式——基于文件的组件。基于文件的组件是通过在文件中放置一个 QML 元素并给文件一个元素名称(例如 Button.qml)来创建的。您可以像使用 Qt Quick 模块中的其他元素一样使用该组件。在我们的示例中，您可以在代码中将其用作 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
}

UI看起来与下图类似。在第一个图像中，UI 处于初始状态，而在第二个图像中按钮已经被单击。

现在我们的任务是将按钮 UI 提取到一个可重用的组件中。为此，我们应该考虑为我们的按钮提供一个可能的 API。你可以通过想象别人应该如何使用你的按钮来做到这一点。以下是我的相法:

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

我想使用文本属性设置文本，并实现我自己的点击处理程序。此外，我希望按钮有一个合理的初始大小，我可以重写它(例如，width: 240)。

为此，我们创建一个 Button.qml 文件并将按钮 UI 复制到其中。此外，我们还需要导出用户可能希望在根级别更改的属性。

// Button.qml

import QtQuick

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

我们已经在根级别导出了text属性和单击信号。通常，我们将根元素的根命名为 root，以便于引用它。我们使用 QML 的别名特性，这是一种将嵌套的 QML 元素内部的属性导出到根级别并使其可供外部使用的方法。重要的是要知道，只有根级属性可以被其他组件从该文件外部访问。

要使用新的 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 { … } ，就可以在 UI 中使用任意多的按钮。一个真正的按钮可能更复杂，例如点击时提供反馈或显示一个更好的装饰。

使用这种技术，可以很容易地创建一系列完整的可重用组件。

【Next】
【Previous】
【Contents】