Qt5 QML - Set component of Loader as an argument problem

Question

I'm looking for how to input for Loader inside Component. Here is my problem.

// CustomSplitView.qml
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

Pane {
  function addItem(text, item) {
    /**
      Here is the problem part I think.
      "headerText" is correctly applied to the 'template' object, 
      but "content" is not.
    **/
    splitView.addItem(template.createObject(null, {"headerText": text, "content": item}))
  }
  Component {
    id: template
    Pane {
      property alias headerText: label.text
      property alias content: loader.sourceComponent
      ColumnLayout { anchors.fill: parent
        Label { id: label }
        Loader {
          id: loader
          Layout.fillWidth: true; Layout.fillHeight: true
          sourceComponent: Rectangle { color: "Green" }
        } // Loader
      } // ColumnLayout
    } // Pane
  } // Component
  SplitView { 
    id: splitView
    anchors.fill: parent
  } // SplitView
} // Pane

// Usage

Pane {
  Component {
    id: redRect
    Rectangle { color: "Red" }
  } // Component
  Column { anchors.fill: parent
    Button {
      text: "add"
      onClicked: customSplitView.addItem("RED", redRect.createObject())
    } // Button 
    CustomSplitView { id: customSplitView }
  } // Column
} // Pane

Result: When "add" button clicked, adding item inside of the split view has "RED" text but green rectangle appears, not red.

It's not a size issue. (detailed resizing code has been omitted for code simplicity) Any advise will helps a lot, for what I missed, or other approaches.

Answer 1

Whenever you want to dynamically create (and, possibly destroy) components, I would highly recommend using a model with a delegate. Because your delegate appears to be dynamic, I recommend using DelegateChooser. This will remove the pain of managing the dynamic creation and destruction of your objects.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    header: Frame {
        RowLayout {
            Button {
                text: "add"
                onClicked: customSplitView.addRandomItem()
            }
            Button {
                text: "clear"
                onClicked: customSplitView.clear()
            }
        }
    }
    CustomSplitView {
        id: customSplitView
    }
}

// CustomSplitView.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Pane {
    anchors.fill: parent
    SplitView {
        anchors.fill: parent
        Repeater {
            id: repeater
            model: ListModel {
                id: listModel
            }
            delegate: DelegateChooser {
                role: "typ"
                DelegateChoice {
                    roleValue: "label"
                    delegate: ColumnLayout {
                        SplitView.preferredWidth: w
                        SplitView.preferredHeight: h
                        Label {
                            Layout.fillWidth: true
                            text: txt
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        }
                        Label {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            text: lbl
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        }
                    }
                }
                DelegateChoice {
                    roleValue: "rect"
                    delegate: ColumnLayout {
                        SplitView.preferredWidth: w
                        SplitView.preferredHeight: h
                        Label {
                            Layout.fillWidth: true
                            text: txt
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        }
                        Rectangle {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            color: Qt.rgba(r, g, b, 1)
                        }
                    }
                }
            }
        }
    }
    function addRandomItem() {
        if (Math.random() < 0.5) {
            listModel.append( {
                typ: "label",
                txt: "Label",
                lbl: "Label " + Math.random(),
                w: 200,
                h: 50,
                r: 0,
                g: 0,
                b: 0
            } );
        } else {
            listModel.append( {
                typ: "rect",
                txt: "Rect",
                lbl: "",
                w: 50,
                h: 50,
                r: Math.random(),
                g: Math.random(),
                b: Math.random()
            } );
        }
    }
    function clear() {
        listModel.clear();
    }
    Component.onCompleted: addRandomItem()
}

You can Try it Online!

If, on the other hand, you really want fully adhoc QML components controlled by a string. You should consider using createQmlObject or Loader with data-uri. Below is a demonstration of the latter:

import QtQuick
import QtQuick.Controls
Page {
    id: page
    Repeater {
        model: [ 
            { qml: "Rectangle { }",
              obj: { width: 100,
                     height: 100,
                     color: "red" } },
            { qml: "Rectangle { radius: height * 0.5 }",
              obj: { width: 50,
                     height: 50,
                     color: "orange" } },
            { qml: "Button { }",
              obj: { text: "Click Me" } }
        ]
        delegate: Loader {
            x: Math.random() * page.width
            y: Math.random() * page.height
            Component.onCompleted: setSource(
                `data:text/plain,import QtQuick
import QtQuick.Controls
` + modelData.qml,
                 modelData.obj
            );            
        }
    }
}

You can Try it Online!

Answer 2

Thanks for insight of Stephen Quan, I could instantiate Component type as an argument of function.

// CustomSplitView.qml
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

Pane {
  function addItem(text, component) {
    listModel.append( {text, component} )
  } // addItem
  SplitView { id: splitView
    anchors.fill: parent
    Repeater {
      model: ListModel { id: listModel } // ListModel
      delegate: Pane {
        property string _headerText: text /* input "text" */
        property var _component: component /* input "component" */
        ColumnLayout { anchors.fill: parent
          Label { text: _headerText } 
          Loader { Layout.fillWidth: true; Layout.fillHeight: true
            sourceComponent: _component
          } // Loader
        } // ColumnLayout
      } // Loader
    } // Repeater
  } // SplitView
} // Pane

// Usage

Window {  

  Component { id: rectComponent
    Rectangle { 
      color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    } // Rectangle
  } // Component

  Component { id: labelComponent
    Label { 
      text: "Label " + Math.random()
    } // Label
  } // Component
  
  Pane { anchors.fill: parent
    ColumnLayout { anchors.fill: parent
      CustomSplitView { id: customSplitView
        Layout.fillWidth: true; Layout.fillHeight: true
        orientation: Qt.Horizontal
      } // customSplitView
      Button {
        text: "Add"
        onClicked: { 
          customSplitView.addItem(
            "Label", Math.random() < 0.5 ? rectComponent : labelComponent) 
        } // onClicked
      } // Button
    } // ColumnLayout
  } // Pane
} // Window

Now the "add" button generates random color of rectangle or random label randomly.