QML学习之Compoment和Qt.createComponent

最新推荐文章于 2024-01-29 20:16:01 发布

Liu-Eleven

最新推荐文章于 2024-01-29 20:16:01 发布

阅读量6.2k

点赞数 2

分类专栏： qml 文章标签： qml之Component

qml 专栏收录该内容

24 篇文章

订阅专栏

博客介绍了在QML中创建和使用Component的方法。有两种创建方式，一是用Qt.createComponent加载qml文件创建，二是用Qt.createQmlObject从qml字符串创建。创建后需调用createObject创建可用对象，销毁时调用对象的destroy方法，同时要检查Component的status属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码：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
    }
}

main.qml

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 Component mainRectComponent: null

        Column {
            id: mainColumn
            spacing: 5

            width: parent.width
            property real 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)
            {
                console.log("-----createComponent....------");
                mainRectComponent = Qt.createComponent("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
                }
            }
        }
    }
}

运行结果：

再看这样的写法：

var editPage = Qt.createComponent("EditPage.qml").createObject(mainPage);

editPage是将要显示的页面；mainPage是editPage的父级页面，也就是editPage返回后的上一级页面。

有两种方法可以创建，都是全局对象Qt提供的方法

一：用Qt.createComponent加载一个qml文件并创建Component

二：用Qt.createQmlObject从一个qml字符串创建Component

注意，以上两种方法返回的是Component，Component在QML中是一种类型，参考文档：

因此还要调用Component的createObject来创建真正可用的对象。createObject第一个参数是指定挂在谁的下方，也就是父窗口是谁。如果传递null,则代表暂时不显示。

如果要销毁，只需要调用对象的destroy方法即可。

调用createObject方法需要注意qml文件已经被加载完成才行，因为这种机制允许远程加载qml文件，所以需要检查Component的status属性：

This property holds the status of component loading. The status can be one of the following:

Component.Null - no data is available for the component
Component.Ready - the component has been loaded, and can be used to create instances.
Component.Loading - the component is currently being loaded
Component.Error - an error occurred while loading the component. Calling errorString() will provide a human-readable description of any errors.