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.

Personally I'm unable to help you because your code doesn't run. If you can narrow down the problem by using Rectangles instead of TestView1, TestView2, etc., and declare missing properties like view_index, you might get more help. — Mitch

QtRoS QtRoS · Accepted Answer · 2014-11-18T17:07:37

12

votes

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

QML ListView draws ObjectModel outside of its bounds

1 Answers