scrollview for different types in qml

Question

I'm designing an application in qml and I need to display a lot of my custom types. They have different sizes. I want to do this using ScrollView. My question is how to do this better? is it worth using the MVC pattern?

import QtQuick 2.15
import QtQuick.Controls 2.15

ScrollView {
    anchors.fill: parent

    Column {
        id: content
        spacing: 10

        Repeater {
            model: [
                { type: "HeaderOrder", data: { text: "Order 1" } },
                { type: "Worker", data: { name: "John Doe", role: "Developer" } },
                { type: "Settings", data: { option1: true, option2: false } }
            ]

            delegate: Loader {
                sourceComponent: {
                    switch (modelData.type) {
                        case "HeaderOrder":
                            return HeaderOrder { text: modelData.data.text }
                        case "Worker":
                            return Worker { name: modelData.data.name; role: modelData.data.role }
                        case "Settings":
                            return Settings { option1: modelData.data.option1; option2: modelData.data.option2 }
                    }
                }
            }
        }
    }
}

I received a suggestion to do something like this, but it doesn't work in qt 5.15

Answer 1

I agree with smr and reecommend the use of DelegateChooser over Loader for your use case.

I also recommend the use of ListView over ScrollView+Column+Repeater.

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels
Page {
    ListView {
        anchors.fill: parent
        model: [
            { type: "HeaderOrder", data: { text: "Order 1" } },
            { type: "Worker", data: { name: "John Doe", role: "Developer" } },
            { type: "Settings", data: { option1: true, option2: false } }
        ]
        delegate: DelegateChooser {
            role: "type"
            DelegateChoice { roleValue: "HeaderOrder"; HeaderOrder { } }
            DelegateChoice { roleValue: "Worker"; Worker { } }
            DelegateChoice { roleValue: "Settings"; Settings { } }
        }
        ScrollBar.vertical: ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
    }
}

// HeaderOrder.qml
import QtQuick
import QtQuick.Controls
Label {
    property var d: modelData.data
    text: `HeaderOrder: ${d.text}`
}

// Worker.qml
import QtQuick
import QtQuick.Controls
Label {
    property var d: modelData.data
    text: `Worker: ${d.name}, ${d.role}`
}

// Settings.qml
import QtQuick
import QtQuick.Controls
Label {
    property var d: modelData.data
    text: `Settings: ${d.option1}, ${d.option2}`
}

You can Try it Online!