QML ListView 间距故障

Question

我的应用程序中有一个简单的页面：

import QtQuick 2.5
import QtQuick.Controls 2.0

Page {

    ListView {
        anchors.fill: parent
        model: 50
        delegate: Item {
            clip: true
            height: 50
            anchors {
                left: parent.left
                right: parent.right
            }

            Rectangle {
                color: "red"
                anchors.fill: parent
            }
            Label {
                text: index
            }

        }
    }

}

有时，当我滚动时，我看到行之间有间距，但间距为零。我想这是某种坐标舍入错误。我追踪了问题的可能来源——clip: true inside delegate。如果我删除它，那么一切都很好。

这是 Qt 的错误吗，我该如何解决它？

Answer 1

如果在启用剪辑时只有那些故障，请不要使用它 - 至少不要在委托的根节点中使用它。

Page {
    ListView {
        anchors.fill: parent
        model: 50
        delegate: Rectangle {
            clip: false // <-- Do not clip in the delegate's root node
            height: 50
            color: "red"
            anchors {
                left: parent.left
                right: parent.right
            }
            Item {
                anchors.fill: parent
                clip: true // <-- instead you might clip in a delegate's child node
                Label {
                    text: index + 'a very long string that might be clipped at some point'
                }
            }
        }
    }  
}

至少在我的电脑上显示没有这些故障。但是我会尽量不剪裁代表，因为剪裁是一个性能因素，它可能会产生影响，尤其是在对象移动时（例如滚动 ListView）

Answer 2

ListView 的 pixelAligned 属性完全解决了我的问题

ListView {
    ...
    pixelAligned: true
    ...
}

QML ListView 间距故障

QML ListView spacing glitch

qt

qml

qtquick2