本篇文章介绍一下QML中的组件,Component
1. 使用Component在QML中嵌入组件
Component是Qt框架或者开发者封装好的、只暴露必要接口的QML类型,可以重复使用。要再QML中嵌入Component的定义,需要使用Component对象。
- Component只能包含一个顶层的Item,而且在这个Item之外不能定义任何的数据,除了Id。
- Component通常用来给一个View提供图形化组件。
- Component不是Item的派生类,而是从QQmlComponent继承而来的,虽然它通过自己的顶层Item为其他的View提供可视化组件,但它本身不是可见元素。
下面是一个简单的在QML文档中定义Component的示例:
Component {
id: itemCompont
Rectangle {
id: compontRect
color: 'blue'
implicitWidth: 200
implicitHeight: 50
signal deleteThis()
Text {
id: interText
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
text: qsTr("text")
}
Button {
anchors.margins: 5
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
text: '删除'
onClicked: {
compontRect.deleteThis()
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
2. 在文件中定义组件
很多时候我们把QML文件定义在一个文件中,方便被其他的QML文件调用。可以直接使用文件名作为组件的名称,在其他的QML文件中使用。上面组件中的代码可以单独定义在一个文件中,本示例的文件名为TestCompont.qml
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Rectangle {
id: compontRect
color: Qt.rgba(0.8, 0.4, 0.4, 1.0)
implicitWidth: 200
implicitHeight: 50
property var currentObject: ''
signal deleteThis(var obj)
// 设置文字的内容
function setCurrentText(textName) {
interText.text = textName
}
Text {
id: interText
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
text: qsTr("text")
}
Button {
anchors.margins: 5
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
text: '删除'
onClicked: {
compontRect.deleteThis(compontRect)
}
}
Component.onCompleted: {
compontRect.currentObject = parent
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
3. 使用Loader加载/删除组件
Loader用来动态加载QML组件。
- source属性,加载一个QML文档。
- sourceComponent属性,加载一个Component对象。
- 当source或sourceComponent属性发生变化时,它之前的对象会被销毁,新对象会被加载。
- 当source设置为空串,或者sourceComponent设置为undefined,将会销毁当前对象,相关资源也会被释放,Loader对象会变成一个空对象。
- item属性指向他加载的组件的顶层Item,比如上面的示例item就为Rectangle。
下面是一个使用Loader加载/删除组件的一个示例,效果如下:
上面的红色Item为直接使用Component的Loader,下面为从文件中加载的组件。
代码如下:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
width: 800
height: 600
visible: true
Rectangle {
id: mainRect
anchors.fill: parent
Loader {
id: loader1
sourceComponent: itemCompont
anchors.top: parent.top
anchors.topMargin: 10
width: mainRect.width
height: 50
function onDisDeleteThis() {
loader1.sourceComponent = undefined
}
onLoaded: {
item.color = 'red'
loader1.item.deleteThis.connect(loader1.onDisDeleteThis)
}
}
Loader {
id: loader2
source: 'qrc:/QML/TestCompont.qml'
anchors.top: loader1.bottom
anchors.topMargin: 10
width: mainRect.width
height: 50
function onDisDeleteThis() {
loader2.source = ''
}
onLoaded: {
loader2.item.deleteThis.connect(loader2.onDisDeleteThis)
}
}
Component {
id: itemCompont
Rectangle {
id: compontRect
color: 'blue'
implicitWidth: 200
implicitHeight: 50
signal deleteThis()
Text {
id: interText
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
text: qsTr("text")
}
Button {
anchors.margins: 5
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
text: '删除'
onClicked: {
compontRect.deleteThis()
}
}
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
4. 使用JavaScript中的语句加载/删除组件
QML支持使用JavaScript动态创建/销毁对象,有两种方式动态创建对象:
- 使用Qt.createComponent()动态创建一个组件对象,然后使用Component的createObject()方法创建对象。
- 使用Qt.createQmlObject()从一个QML字符串直接创建一个对象。
如果QML文件中嵌入Component,可以直接使用这个组件的createObject()方法创建组件;使用Component的destroy()方法删除已经创建的组件。destroy()方法可以指定一个延时,不过不指定,他会在适当的时候删除。
下面是一个简单的示例:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
width: 800
height: 600
visible: true
Rectangle {
id: mainRect
anchors.fill: parent
property var mainRectComponent: null
Column {
id: mainColumn
spacing: 5
width: parent.width
property var count: 0
function deleteItems(object) {
object.destroy()
}
function createItem() {
var color = 'red'
if (mainColumn.count % 3 === 1)
color = 'yellow'
else if (mainColumn.count % 3 === 2)
color = 'blue'
mainColumn.count++
// 创建一个组件
var obj = itemCompont.createObject(mainColumn, {"color": color, "width": mainRect.width})
//obj.setCurentObject(obj)
obj.setCurrentText('Component' + mainColumn.count.toString())
obj.deleteThis.connect(mainColumn.deleteItems)
// 创建文件中的组件
var obj2 = mainRect.mainRectComponent.createObject(mainColumn,
{'color': Qt.rgba(0.4, 0.8, 0.6, 1.0)
,'width': mainRect.width})
obj2.setCurrentText('Component' + mainColumn.count.toString() + ', From File TestComponent')
obj2.deleteThis.connect(mainColumn.deleteItems)
}
}
Button {
anchors.top: mainColumn.bottom
anchors.topMargin: 10
anchors.right: mainRect.right
anchors.rightMargin: 10
text: '添加'
onClicked: {
mainColumn.createItem()
}
}
Component.onCompleted: {
if (mainRectComponent == null)
mainRectComponent = mainRectComponent = Qt.createComponent('qrc:/QML/TestCompont.qml')
}
Component {
id: itemCompont
Rectangle {
id: compontRect
color: 'blue'
implicitWidth: 200
implicitHeight: 50
property var currentObject: ''
signal deleteThis(var obj)
// 设置文字的内容
function setCurrentText(textName) {
interText.text = textName
}
Text {
id: interText
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
text: qsTr("text")
}
Button {
anchors.margins: 5
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
text: '删除'
onClicked: {
compontRect.deleteThis(compontRect)
}
}
Component.onCompleted: {
compontRect.currentObject = parent
}
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
Component.createObject()的方法,第一个参数指定它的父对象,第二个参数可以指定这个组件的一些参数。
代码的显示效果如下: