qml 中不同类型的滚动视图

Question

我正在使用 qml 设计一个应用程序，我需要显示很多自定义类型。它们有不同的尺寸。我想使用 ScrollView 来做到这一点。我的问题是如何做得更好？值得使用 MVC 模式吗？

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 }
                    }
                }
            }
        }
    }
}

我收到了做类似事情的建议，但它在 qt 5.15 中不起作用

Answer 1

我同意 smr 的观点，并建议在您的用例中使用 DelegateChooser 而不是 Loader。

我还推荐使用ListView而不是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}`
}

您可以在线尝试！