confining ListView to mainWindow margins

[mzimmers]

Hi all -

I'd like to code a display that shows some number of items horizontally. The cumulative length of the items sometimes will exceed the window width, so the user can just scroll by swiping to see the desired items.

I'd like to confine my ListView to the margins established in my ApplicationWindow, but I don't seem to be able to do that.

Here's the code:

ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    visible: true
    readonly property int margin: 32
    readonly property int gutter: 16

    ColumnLayout {
        anchors.fill: parent
        ListView {
            Layout.fillHeight: true
            width: mainWindow.width - (mainWindow.margin * 2)
            Layout.margins: mainWindow.margin
            Layout.alignment: Qt.AlignHCenter
            orientation: ListView.Horizontal
            spacing: mainWindow.gutter
            boundsBehavior: Flickable.StopAtBounds
            boundsMovement: Flickable.StopAtBounds
            model: 5 //listModel
            delegate: Rectangle {
                height: 100
                width: 200
                color: 'lightblue'
                border.width: 1
            }
        }
    }
}

And this is what I'm getting:

How can I get the contents of the list not to overreach the margins of the ApplicationWindow?

Thanks...

[sierdzio]

Add this to your ListView:

clip: true

[mzimmers]

@sierdzio of course - how silly of me. Thanks, @sierdzio.

[sierdzio]

Don't worry, everybody forgets about clip from time to time :D I've been bitten by this a lot myself.