Listview item's z-order and view range

bellnas

Hi,guys:
following code:
@
import QtQuick 1.0
Item {
id: window
width: 500; height: 200
Rectangle{anchors.fill: parent; color: "#404000"}

Rectangle{id: one
    height: parent.height
    width: 300
    color: "#B00000"
}
Component { id: dele

  Item {//z: 2
    height: window.height
    width: 20
    Rectangle {
        anchors.fill: parent
        color: "#0000A0"
        opacity: 0.5
    }
    Rectangle {
        height: parent.height; width: 2
        anchors.bottom: parent.bottom
        color: "white"
    }
  }
}
ListView{
    height: parent.height
    anchors{left:one.right; right: parent.right}
    model: 5
    delegate: dele
    orientation: ListView.Horizontal
    flip: true
}

}
@
drag the left with mouse to left , two questions:
1- I want set view-range of listview, if it is out of the range , no need to show its item
2- the z-order of the first and last item is correct, but the mid-items , is wrong.

xsacha

The problem you're having has nothing to do with z-order. In fact, remove z from your code altogether.

The problem is that you are flicking these objects within a ListView. This ListView has a width of 100 and is set between the two anchors (the second rectangle).

When you drag the objects outside of the ListView, they are clipped as they should be. The idea is they are out of the object and it's a waste of resources to remember and paint them.

There are two solutions:

@cachebuffer: 100@
This will show images that are 100 pixels away from the edge of the ListView. This is exactly what you want.
Make the Listview 200 px wide instead.

bellnas

I add clip: true in ListView and kick the problem.
but , I dont understand why ListView's first/last item has different z-order with other items.

and 3x xsacha. I test cacheBuffer ,which looks like not my wanted

xsacha

It is because it doesn't destroy the first and last item when they exceed boundaries.

There is no z-orders going on here. The flicking item is above only because it was created last.

The items disappear because they have been dragged outside of the object they are contained within. To save memory and resources, they are then ignored unless you have explicitly told the ListView to remember them (eg. cacheBuffer).

In about 90% of cases you want them to disappear because they are not visible anyway. And if they are visible, you will want to set
@clip: true@
for the ListView so that the first and last items are not visible too.

In your case you seem to want them to remain visible, so you can use:
@cacheBuffer: 100@
to keep 100px width visible.

Satmosc

@clip: true @
it did the job very well.... :)