Filling a model in two columns with scrolling

Question

need to arrange the model in 4 rows and two displayed columns, the remaining columns are accessible by scrolling the scroll bar.

my code:

Window {
    width: 300
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 300
        height: 480

        ListModel {
            id: dataModel

            ListElement {
                color: "orange"
                text: "1"
            }
            ListElement {
                color: "skyblue"
                text: "2"
            }
            ListElement {
                color: "orange"
                text: "3"
            }
            ListElement {
                color: "skyblue"
                text: "4"
            }
            ListElement {
                color: "orange"
                text: "5"
            }
            ListElement {
                color: "skyblue"
                text: "6"
            }
            ListElement {
                color: "orange"
                text: "7"
            }
            ListElement {
                color: "skyblue"
                text: "8"
            }
            ListElement {
                color: "orange"
                text: "9"
            }
            ListElement {
                color: "skyblue"
                text: "10"
            }

        }

        GridView {
            id: view

            anchors.margins: 10
            anchors.fill: parent

            model: dataModel


            flow: GridView.FlowTopToBottom
            delegate: Rectangle {
                width: 150
                height: 100
                color: model.color

                Text {
                    anchors.centerIn: parent
                    renderType: Text.NativeRendering
                    text: model.text
                }
            }
        }       
    }
}

I tried to do it through listView and tableview. but it didn't work to arrange it in two columns with scroll

Answer 1

I think you are close. I would add the following properties to your GridView:

GridView {
    // ...
    // clip, ScrollBar and cell dimension corrections
    clip: true
    ScrollBar.horizontal: ScrollBar { policy: ScrollBar.AlwaysOn }
    cellWidth: 150
    cellHeight: 100
    // ...
}

You can Try it Online!