gridview bouderis



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

    0_1533794352404_Untitled.png



  • @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



  • thank you @LeLev



  • np @amir.sanaat , have a good day


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.