Верхний элемент в ListView полностью исчезает, даже если границы частично отсутствуют. Как я могу это исправить?

Question

Я учусь использовать Qt и QML. Прямо сейчас я пытаюсь использовать ListView, и я в основном заставил его работать, за исключением этой маленькой визуальной ошибки.

Когда я запускаю код, сначала он выглядит нормально. Но если я прокручиваю немного, верхний элемент полностью исчезает. Он появляется снова только при достаточной прокрутке назад, так что он полностью находится в границах. В то же время в списке есть только уродливое пустое место. Это происходит с каждым элементом, когда он выходит за верхнюю границу.

Я хочу, чтобы элементы были частично нарисованы. Библиотека явно способна сделать это, поскольку эта проблема не возникает в нижней части, но я просто не могу понять, как это сделать.

Вот упрощенная версия моего кода:

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
                }
            }
        }
    }
}

А вот несколько картинок проблемы. Первое изображение правильное, второе изображение показывает ошибку. Также обратите внимание, как правильно нарисован нижний элемент.

Исправьте сначала

Неправильно после небольшой прокрутки

• Qt 5.12

Answer 1

Проблема вызвана тем, что в вашем случае ненужное свойство spacing. Решение состоит в том, чтобы удалить это свойство и переписать логику следующим образом:

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
            }
        }
    }
}