QML ListView draws ObjectModel outside of its bounds

Question

I'm trying to get into QT/QML coming from WPF/XAML.

In a test GUI, I'm using a ListView to display different Models on click of a button. This works alright so far, the view keeps showing each model when I click the corresponding button. But it still draws all the other models outside of its own bounds, overlapping surrounding elements with them. Can I turn this behaviour off?

This is my ListView:

ListView
{
    id: list_view

    anchors.fill:                   parent
    model:                          main_view_model
    snapMode:                       ListView.SnapOneItem
    boundsBehavior:                 Flickable.StopAtBounds
    highlightFollowsCurrentItem:    true
    highlightMoveDuration:          75
    highlightRangeMode:             ListView.StrictlyEnforceRange
    currentIndex:                   view_index
}

And this is the ObjectModel:

ObjectModel
{
    id: main_view_model

    // ListView index 0
    TestView1
    {
        anchors.centerIn: parent.center
        width: list_view.width
        height: list_view.height
    }

    // ListView index 1
    TestView2
    {
        anchors.centerIn: parent.center
        width: list_view.width
        height: list_view.height
    }

    // ListView index 2
    TestView3
    {
        anchors.centerIn: parent.center
        width: list_view.width
        height: list_view.height
    }

    // ListView index 3
    TestView4
    {
        anchors.centerIn: parent.center
        width: list_view.width
        height: list_view.height
    }
}

I'm still struggling a bit with the layout and anchoring concepts of QML, since I'm used to XAML. So please excuse if I'm making an obvious mistake.

Answer 1

Seems that "clip" property of Item will help you: Item.clip