如何在QML ListView中按条目类型使用不同Delegate并自定义坐标定位

1. 根据type字段加载不同Delegate #

有两种常见实现方式，可根据你的Qt版本选择：

方式1：使用DelegateChooser（Qt 5.12+ 推荐） #

Qt Quick Controls 2.12开始内置DelegateChooser组件，是官方推荐的多Delegate实现方案，性能和可读性更好：

import QtQuick 2.15
import QtQuick.Controls 2.12

ListView {
    id: listView
    model: yourCustomModel // 替换为你实现的QListModel实例
    anchors.fill: parent

    delegate: DelegateChooser {
        role: "type" // 和你Model中注册的type字段role名一致
        DelegateChoice {
            roleValue: "circle"
            Circle { // 你自定义的circle.qml组件
                // Qt 5.15+ 可声明required属性直接绑定字段
                required property int someValue
                // 组件内部直接使用someValue即可，比如Text显示
            }
        }
        DelegateChoice {
            roleValue: "rectangle"
            Rectangle { // 你自定义的rectangle.qml组件
                required property int someValue
            }
        }
        // 其他type对应新增DelegateChoice即可
    }
}

如果你的Qt版本低于5.15，不需要声明required属性，组件内直接访问model.someValue即可读取字段值。

方式2：使用Loader（兼容所有Qt版本） #

如果需要兼容旧版本Qt，可以用Loader动态加载组件：

ListView {
    id: listView
    model: yourCustomModel
    anchors.fill: parent

    delegate: Loader {
        source: {
            switch(model.type) {
                case "circle": return "qrc:/circle.qml"
                case "rectangle": return "qrc:/rectangle.qml"
                default: return "qrc:/DefaultDelegate.qml" // 可选，处理未知type
            }
        }
        // 传递model字段到加载的组件
        onLoaded: {
            item.someValue = model.someValue
        }
    }
}

2. 自定义Delegate摆放位置，脱离默认列表排布 #

根据你的数据量和功能需求，有两种实现方案：

方案A：Repeater+容器（适合数据量<100条，无需复用） #

完全不受列表默认布局限制，灵活度最高：

Item {
    id: customContainer
    anchors.fill: parent
    Repeater {
        model: yourCustomModel
        delegate: Loader {
            // 自定义坐标，可写死计算逻辑，也可从model读取预存的x/y字段
            x: model.xPos
            y: model.yPos
            source: model.type === "circle" ? "qrc:/circle.qml" : "qrc:/rectangle.qml"
            onLoaded: item.someValue = model.someValue
        }
    }
}

方案B：保留ListView的复用/滚动能力 #

如果需要处理大量数据、要用到ListView的delegate复用、滚动回弹等特性，可直接覆盖delegate的x/y属性，关闭默认排布：

ListView {
    id: customListView
    model: yourCustomModel
    anchors.fill: parent
    spacing: 0 // 关闭默认条目间距

    delegate: Loader {
        // 覆盖ListView默认的排布位置，自定义坐标
        x: 20 + index * 60 // 示例计算逻辑，可替换为你自己的规则
        y: index % 3 * 120
        source: model.type === "circle" ? "qrc:/circle.qml" : "qrc:/rectangle.qml"
        onLoaded: item.someValue = model.someValue

        // 主动告知ListView delegate的大小，避免滚动区域计算错误
        width: item.width
        height: item.height
    }
    // 可选：如果自定义排布的总宽高超过视口，手动调整滚动区域大小
    contentWidth: 1200
    contentHeight: 800
}

注意事项 #

• 所有需要在QML侧访问的字段（type、someValue、坐标等），需要确保你在实现QAbstractListModel的roleNames()方法时正确注册了对应的role。
• 如果有delegate重叠的场景，可通过设置z属性调整显示层级。

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