I am trying to achieve this output [Refer snapshot : click here]

I tried Using, since I am new to Qt not sure whether my approach of using repeater is right or wrong.

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

CodePudding user response：

I have found the solution to my problem. Obtained output 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
    }
}