Qt World Summit: Register Today!

Listview item's z-order and view range

  • 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"
        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.

  • 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:

    1. @cachebuffer: 100@
      This will show images that are 100 pixels away from the edge of the ListView. This is exactly what you want.

    2. Make the Listview 200 px wide instead.

  • 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

  • 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.

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

Log in to reply