通过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产生冲突。因为这两个将在不同的范围内声明。