Qml learning - dynamic loading of controls

I have been learning Qml recently, but I am not very familiar with the various uses of Qml and always forget it, so I wrote a few articles to record what I encountered during the learning process.
Learning reference video: https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
Other articles:
Qml learning - dynamic loading of controls
Qml learning - control status
Qml learning - using JavaScript
Qml learning - animation
Qml learning - mouse event handling MouseArea
Qml learning - layout
Qml learning - basic controls

---

1 Dynamically loading controls

1.1 Loading with Component

Component provides the createObject method, which can be called when the program is running to add controls. Its official routine is as follows.

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

This method needs to encapsulate the loaded control into a qml file first, and then load the qml file through createComponent. If the qml file is available (component.status == Component.Ready), then use createObject to create an instance, parameter 1 is the parent control id of the instance, and parameter 2 is the initial property of the instance.

1.1.1 How to use

The following examples illustrate the usage process.
Create a Rect.qml file.


Fill in the following content in Rect.qml and define a blue rectangle with a length and width of 30.

import QtQuick 2.0

Rectangle {
    
     width: 30; height: 30; color: 'blue' }

Fill in the content in main and qml, and use buttons to dynamically add Rect controls to the grid layout.

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

Window {
    
    
    visible: true; width: 200; height: 120

    GridLayout {
    
    
        id: layout
        columns: 4
    }

    Button {
    
    
        anchors.bottom: parent.bottom

        onClicked: {
    
    
            let component = Qt.createComponent("Rect.qml");
            if (component.status == Component.Ready)
                component.createObject(layout);
        }
    }
}

Effect:

1.2 Loading with Loader

The Loader class provided by Qml dynamically loads controls. The following is the official description:

Loader can load QML files (using the source attribute) or Component objects (using the sourceComponent attribute). This is useful for deferring the creation of components until needed: for example, when a component should be created on demand, or when a component should not be created unnecessarily for performance reasons.

It is different from Component loading in the following two ways.
1. Loader delays the loading of preset controls, and does not load any number of controls like Component.
2. Loader can load Component objects or qml files, and Component can only load qml files.

1.2.1 Usage

Load qml file

Take the Rect and qml in the previous section as an example.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    
    
    visible: true; width: 200; height: 120

    Loader {
    
     id: loader}
    Button {
    
    
        anchors.bottom: parent.bottom
        onClicked: loader.setSource("Rect.qml")
    }
}

Load Component

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    
    
    visible: true; width: 200; height: 120
    
    Loader {
    
     id: loader }

    Component {
    
    
        id: component
        Rect {
    
    }
    }

    Button {
    
    
        anchors.bottom: parent.bottom
        onClicked: loader.sourceComponent = component
    }
}