QML基础之Defining Object Types through QML Documents(翻译)

最新推荐文章于 2023-12-23 14:14:42 发布

Oak24

最新推荐文章于 2023-12-23 14:14:42 发布

阅读量163

点赞数

原文链接：https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#

版权

文章目录

- 通过QML文档定义对象类型
- - 使用QML文件(文档)定义对象类型

通过QML文档定义对象类型

QML的核心功能之一是它可以通过QML文档以轻量级方式轻松定义QML对象类型，以满足各个QML应用程序的需求。标准的Qt Quick模块提供了各种类型，如Rectangle，Text和Image，用于构建QML应用程序; 除此之外，您还可以轻松定义自己的QML类型，以便在应用程序中重用。这种创建自己的类型的能力构成了任何QML应用程序的构建块。

译者注：在QML文档中定义的对象类型通常称之为组件，这是在QML中定义组件的方式之一。

使用QML文件(文档)定义对象类型

自定义QML对象类型的命名规则

要在QML文档中创建QML对象类型，应将QML文档放入名为 .qml的文本文件中，其中是所需的类型名称。类型名称具有以下要求：

它必须由字母, 数字或下划线组成。
它必须以大写字母开头。

然后，引擎自动将该文档识别为QML类型的定义。此外，当引擎在解析QML类型名称时，引擎会在立即目录中搜索类型名称，以这种方式定义的类型将自动对同一目录中的其他QML文件可用。

自定义QML对象类型

例如，下面是一个文档，它声明了一个带有子MouseArea的 Rectangle。文件已保存到名为SquareButton.qml的文件中:

// SquareButton.qml
import QtQuick 2.0

Rectangle {
    property int side: 100
    width: side; height: side
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

既然文件名为SquareButton.qml，那么我们自定义的对象类型的类型名称就是SquareButton。现在，我们就可以在同一目录中的其他QML文件中使用SquareButton对象类型来声明对象。例如，如果在SquareButton.qml的同一目录下有一个名为myapplication.qml的文件，myapplication.qml就可以直接引用SquareButton对象类型:

// myapplication.qml
import QtQuick 2.0

SquareButton {}

导入当前目录之外定义的类型

如果SquareButton.qml与myapplication.qml不在同一目录下，如果我们想在myapplication.qml中引用SquareButton对象类型，则需要使用import语句来导入我们想要引用的对象类型。对象类型可以从文件系统的相对路径导入，也可以作为已安装的模块导入; 有关详细信息，请参阅模块

访问自定对象类型中属性

在.qml文件中定义的root对象定义QML对象类型可以在外部访问属性。属于这个根对象的所有属性、信号和方法——无论是自定义声明的，还是来自根对象的QML类型的——都可以从外部访问，并且可以读写这种类型的对象。

例如，在SquareButton.qml中的root对象的类型为Rectangle。这意味着在Rectangle对象类型中定义的任何属性都可以被SquareButton对象修改。下面的代码定了三个SquareButton对象，每个对象都修改了SquareButton类型的根对象Rectangle的属性值：

// application.qml
import QtQuick 2.0

Column {
    SquareButton { side: 50 }
    SquareButton { x: 50; color: "blue" }
    SquareButton { radius: 10 }
}

自定义QML类型的对象可以访问的属性包括为对象额外定义的任何自定义属性、方法和信号。例如，假设SquareButton.qml中的矩形定义如下，附加属性、方法和信号:

// SquareButton.qml
import QtQuick 2.0

Rectangle {
    id: root

    property bool pressed: mouseArea.pressed

    signal buttonClicked(real xPos, real yPos)

    function randomizeColor() {
        root.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    }

    property int side: 100
    width: side; height: side
    color: "red"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: root.buttonClicked(mouse.x, mouse.y)
    }
}

任何SquareButton对象都可以使用添加到根矩形中的pressed属性、buttonClicked signal和randomizeColor()方法:

// application.qml
import QtQuick 2.0

SquareButton {
    id: squareButton

    onButtonClicked: {
        console.log("Clicked", xPos, yPos)
        randomizeColor()
    }

    Text { text: squareButton.pressed ? "Down" : "Up" }
}

注意，SquareButton.qml中定义的任何id值。SquareButton对象都不能访问，因为id值只能在声明组件的组件范围内访问。上面的SquareButton对象定义不能引用mouseArea来引用mouseArea子对象，如果它的id是root而不是SquareButton，那么这将不会与在SquareButton.qml中定义的根对象的id产生冲突。因为这两个将在不同的范围内声明。