qtlistviewqml

Wrapping ListView inside a Rectangle


My problem is when I scroll ListView elements, the elements scroll over the rectangle's border, even though I have wrapped the ListView inside the Rectangle.

How can I make elements scroll without going past the Rectangle borders?

Following is the code:

ListModel{
    id: mod
}

Rectangle{
    id:listviewrec
    x: 347
    y:644
    width: 700
    height: 91
    radius: 4
    border.color:"#7CC7FF"
    border.width: 4
    visible: true

    ListView{
        id:modlistview
        width: listviewrec.width
        height: listviewrec.height
        clip: true
        boundsBehavior: Flickable.DragOverBounds
        spacing:25
        model:mod
        delegate: delegateimage
        orientation: Qt.Horizontal
        anchors.fill: listviewrec
    }
}

Component{
    id:delegateimage
    Item{
        id:imageitem
        width:50
        height:60
        visible:true
        
        Rectangle{
            id:imagerec
            x:10
            y:6
            width: 60
            height:70                    
            border.color: "#7CC7FF"
            border.width: 5
            radius: 2
            visible:true

            Image{
                x: 3
                y: 3
                height : imagerec.height
                visible: true
                width : imagerec.width
                anchors.fill: imagerec
                source:fileUrl
            }
        }
    }
}

Solution

  • I don't think QML has the concept of inner and outer rects as far as borders are concerned, (or if it does, borders are drawn in the inner-rect, so children will be drawn on top).

    Your best bet here is to probably do something like this:

    Item {
        id:listviewrec
        x: 347
        y:644
        width: 700
        height: 91
        visible: true
    
        ListView{
            id:modlistview
            width: listviewrec.width
            height: listviewrec.height
            clip: true
            boundsBehavior: Flickable.DragOverBounds
            spacing:25
            model:mod
            delegate: delegateimage
            orientation: Qt.Horizontal
            anchors.fill: listviewrec
        }
    
        Rectangle {
            radius: 4
            border.color:"#7CC7FF"
            border.width: 4
            color: 'transparent'
            anchors.fill: parent
        }
    }
    

    It simply draws a transparent rect with the border you want on top of the ListView.