Top item in a ListView disappears completely even when only partially ouside bounds. How can I fix this?

user_9627269 0
Viewed 290

I'm learning to use Qt and QML. Right now, I'm trying to use a ListView, and I mostly got it to work, except for this one little visual bug.

When I run the code, at first it looks fine. But if I scroll a little bit, the top item disappears completely. It only appears again when scrolling back enough so that it is entirely within bounds. In the mean time, there's only a ugly blank spot in the list. That happens with every item when it goes over the top bound.

I want the items to be partially drawn. The library is clearly capable of doing this, since this problem doesn't happen in the lower bound, but I simply cannot figure out how to do it.

Here's a simplified version of my code:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: window
    width: 360
    height: 520
    visible: true
    title: "Qml.Net"

    ListView {
        anchors.fill: parent
        spacing: 100
        model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]  


        delegate: Item {
            Rectangle {
                width: 400
                height: 100
                color: modelData

                Text {
                    anchors.centerIn: parent
                    text: modelData
                }
            }
        }
    }
}

And here are some pictures of the problem. First image is correct, second image shows the error. Also, notice how the bottom item is correctly drawn.

Correct at first

Wrong after a little bit of scrolling

  • Qt 5.12
qml qt
1 Answers

The problem is caused by the "spacing" property that is unnecessary in your case. The solution is to remove that property and rewrite the logic as follows:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: window
    width: 360
    height: 520
    visible: true
    title: "Qml.Net"

    ListView {
        anchors.fill: parent
        model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]  

        delegate: Rectangle {
            width: parent.width
            height: 100
            color: modelData
            Text {
                anchors.centerIn: parent
                text: modelData
            }
        }
    }
}
user_66225870
Related