Qt5.15中ScrollView展示不同自定义类型的优化及MVC适用性问询

一、修复 Qt 5.15 中代码失效问题 #

你提供的代码无法在 Qt 5.15 运行的核心原因是：sourceComponent 要求接收 Component 类型对象，而非直接创建的 Item 实例。原代码中直接返回 HeaderOrder { ... } 这类实例是错误的，需将每个组件包装为 Component 后再赋值。

修正后的代码如下：

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 {
                // 预定义各组件的Component
                Component { id: headerOrderComp; HeaderOrder { text: modelData.data.text } }
                Component { id: workerComp; Worker { name: modelData.data.name; role: modelData.data.role } }
                Component { id: settingsComp; Settings { option1: modelData.data.option1; option2: modelData.data.option2 } }

                sourceComponent: {
                    switch (modelData.type) {
                        case "HeaderOrder": return headerOrderComp
                        case "Worker": return workerComp
                        case "Settings": return settingsComp
                        default: return null
                    }
                }
            }
        }
    }
}

二、更优实现方案 #

1. 采用 ListView 替代 Column + ScrollView #

当需要展示大量组件时，Column 会一次性创建所有子项，导致内存占用过高、启动速度慢。ListView 支持虚拟滚动（仅渲染可见区域内的项），性能更优：

ScrollView {
    anchors.fill: parent

    ListView {
        anchors.fill: parent
        spacing: 10
        model: yourDataModel // 可替换为ListModel或C++自定义模型
        delegate: Loader {
            // 同上的Component定义与switch逻辑
            sourceComponent: /* ... */
        }
    }
}

2. 分离数据与视图（Model-View 模式） #

将组件类型和数据统一存入模型（如 ListModel 或 C++ 的 QAbstractListModel），而非硬编码在 QML 中，便于动态更新和维护：

ListModel {
    id: componentModel
    ListElement { type: "HeaderOrder"; text: "Order 1" }
    ListElement { type: "Worker"; name: "John Doe"; role: "Developer" }
    ListElement { type: "Settings"; option1: true; option2: false }
}

// 在Repeater/ListView中使用：
delegate: Loader {
    sourceComponent: {
        switch (model.type) {
            case "HeaderOrder": return Component { HeaderOrder { text: model.text } }
            // ... 其他case
        }
    }
}

3. 封装组件选择逻辑 #

可将组件匹配逻辑封装为单独的 JS 函数或自定义类型，避免 delegate 代码臃肿：

function getComponentForType(type, data) {
    switch(type) {
        case "HeaderOrder": return Component { HeaderOrder { text: data.text } }
        case "Worker": return Component { Worker { name: data.name; role: data.role } }
        default: return null
    }
}

// Loader中调用：
sourceComponent: getComponentForType(modelData.type, modelData.data)

三、是否值得采用 MVC 模式？ #

QML 本身就基于 Model-View-Delegate（MVD） 架构，这是 MVC 的变体，完全适配你的场景：

• Model：负责存储组件类型、数据（如上述 ListModel 或 C++ 模型）
• View：ScrollView/ListView 负责滚动和布局
• Delegate：Loader 及其内部组件负责渲染单个项

采用这种模式的优势：

• 数据与视图分离，便于修改数据或更换组件样式
• 动态数据更新更便捷（如从后端获取数据后直接更新模型）
• 代码可维护性更高，尤其当组件类型或数据结构复杂时

因此，强烈建议遵循 MVD（类 MVC）模式实现，特别是当你的组件数量多、数据动态变化时。

内容的提问来源于stack exchange，提问作者xzxolop