import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.2
import QtQml 2.13

Rectangle {
    width: 500
    height: 300
    color: "#0f0f0f"
    Flickable {
        anchors.fill: parent
        contentWidth: parent.width
        contentHeight: idGridView.height
        boundsMovement: Flickable.StopAtBounds
        flickableDirection: Flickable.VerticalFlick
        clip: true
        ScrollBar.vertical: ScrollBar {
            width: 8
            anchors.right: parent.right // adjust the anchor as suggested by derM
            policy: ScrollBar.AlwaysOn
        }
        GridLayout {
            id: idGridView
            width: parent.width
            onHeightChanged: console.log(height)
            columns: 3
            columnSpacing: 24
            rowSpacing: 24
            Component.onCompleted: {
                console.log(height)
            }

            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.preferredHeight: width
                color: "gray"
            }
        }
    }
}