qml-自定义组件

新建DateTimeLabel.qml

填写内容：

import QtQml 2.12
import QtQuick.Controls 2.0
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12


Item {
     Timer {
         interval: 500; running: true; repeat: true
         onTriggered: time.text = Date().toString()
     }

     Text { id: time }
 }

加载到qrc中

由于和main.qml在同一路径下，可以直接使用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12


Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    DateTimeLabel{}
}

 object createComponent(url, mode, parent)

        返回使用指定 url 处的 QML 文件创建的 Component 对象，如果给出了空字符串，则返回 null。
        返回组件的 Component::status 属性表示组件是否创建成功。如果状态为 Component.Error，请参阅 Component::errorString() 以获取错误描述。
        如果可选模式参数设置为 Component.Asynchronous，则组件将在后台线程中加载。 Component::status 属性在加载时将为 Component.Loading。如果组件加载成功，状态将更改为 Component.Ready，如果加载失败，则状态将更改为 Component.Error。如果省略，此参数默认为 Component.PreferSynchronous。
        如果 mode 设置为 Component.PreferSynchronous，Qt 将尝试同步加载组件，但如果需要，可能最终异步加载它。可能导致异步加载的场景包括但不限于以下几种：

• URL 引用网络资源
• 由于正在异步加载另一个组件，因此正在创建该组件

        如果给定了可选的 parent 参数，它应该引用将成为创建的 Component 对象的父级的对象。如果未传递任何模式，则这可以是第二个参数。
        在返回的组件上调用 Component.createObject() 以创建组件的对象实例。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12


Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    function loadButton() {
        var component = Qt.createComponent("qrc:/DateTimeLabel.qml");
        if (component.status == Component.Ready) {
            var dateTimeLabel = component.createObject(root);

        }
    }

    Component.onCompleted: loadButton()
}

object createObject(QtObject parent, object properties)
 

创建并返回此组件的对象实例，该实例将具有给定的父级和属性。属性参数是可选的。如果对象创建失败，则返回 null。
该对象将在与创建组件的上下文相同的上下文中创建。当调用不是在 QML 中创建的组件时，此函数将始终返回 null。
如果您希望在不设置父对象的情况下创建对象，请将父值指定为 null。请注意，如果要显示返回的对象，必须提供有效的父值或设置返回对象的 parent 属性，否则该对象将不可见。
如果未向 createObject() 提供父对象，则必须保留对返回对象的引用，以免垃圾收集器将其销毁。无论之后是否设置了 Item::parent 都是如此，因为设置 Item 父级不会更改对象所有权。仅更改图形父级。
从 QtQuick 1.1 开始，此方法接受一个可选的属性参数，该参数为创建的对象指定初始属性值的映射。这些值在对象创建完成之前应用。这比在对象创建后设置属性值更有效，特别是在定义大量属性值的情况下，并且还允许在创建对象之前设置属性绑定（使用 Qt.binding）。
属性参数被指定为属性值项的映射。例如，下面的代码创建了一个初始 x 和 y 值分别为 100 和 100 的对象：

 var component = Qt.createComponent("Button.qml");
 if (component.status == Component.Ready)
     component.createObject(parent, {x: 100, y: 100});

Loader

        Loader 用于动态加载 QML 组件。
        Loader 可以加载 QML 文件（使用 source 属性）或 Component 对象（使用 sourceComponent 属性）。 它对于延迟组件的创建直到需要它是有用的：例如，何时应按需创建组件，或出于性能原因不应不必要地创建组件时。
        这是一个加载器，它在单击 MouseArea 时将“Page1.qml”作为组件加载：

 import QtQuick 2.0

 Item {
     width: 200; height: 200

     Loader { id: pageLoader }

     MouseArea {
         anchors.fill: parent
         onClicked: pageLoader.source = "Page1.qml"
     }
 }

        可以使用 item 属性访问加载的对象。
        如果源或源组件发生更改，则任何先前实例化的项目都将被销毁。 将 source 设置为空字符串或将 sourceComponent 设置为 undefined 会破坏当前加载的对象，释放资源并使 Loader 为空