Qml 中的嵌套 ListView

Nested ListView in Qml

我正在尝试实现此输出[参考快照: click here]

我试过使用,因为我是Qt的新手,不确定我使用中继器的方法是对还是错。

ListView {
id: outer
model: model1
delegate: model2
anchors.fill: parent
}

Component {
    id: model1
    Item {
        Column{
            Repeater {
                model: 3
                Rectangle {
                    id: rect
                    anchors.top: parent.bottom
                    width: 300
                    height: 30
                    color: listColor2[index]
                }
            }
        }
    }
}

Component {
    id: model2
    Column{
        Repeater {
            model: 4
            Rectangle {
                id: rect
                
                width: 150
                height: 30
                color: listColor[index]
            }
        }
    }
}

我找到了解决问题的方法。 获得输出click here

Rectangle {
    width: 360
    height: 360
    
    
    ListView {
        id: outer
        model: 4
        delegate:
            Rectangle {
            id: rect
            color: listColor[index]
            width: 60
            implicitHeight: col.height
            Column{
                id: col
                anchors.left: rect.right
                Repeater {
                    id: lv2

                    model: 4
                    Rectangle {
                        id: rect2
                        color: listColor2[index]
                        width: 200
                        height: 20
                    }
                }
            }
        }
        anchors.fill: parent
    }
}