gridview bouderis

amir.sanaat

hello my friends
I wanna to use a grid view to show two column of buttons.
As I showed in the attached image, when I scroll the grid view upward it goes through the above text.
I wanna the grid view disappear when arriving at the text placed above of that.
Actually, I want the grid view has been limited to the pink rectangle.
What should I do??

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        id: rectangle
        x: 194
        y: 83
        width: 199
        height: 248
        color: "#f7cdcd"
    GridView {
        id: gridView
        width: 167
        height: 232

        cellWidth: 70
        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
        delegate: Item {
            x: 5
            height: 50
            Column {
                Rectangle {
                    width: 40
                    height: 40
                    color: colorCode
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Text {
                    x: 5
                    text: name
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.bold: true
                }
                spacing: 5
            }
        }
        cellHeight: 70
    }
    }
    Text {
        id: text1
        x: 200
        y: 63
        text: qsTr("sasssssssssssssssssssssssssssssssssss")
        font.pixelSize: 12
    }
}

ODБOï

@amir.sanaat hi,
Please set the "clip" property of your GridView to true

 clip : true

http://doc.qt.io/qt-5/qml-qtquick-gridview.html

amir.sanaat

thank you @LeLev

ODБOï

np @amir.sanaat , have a good day