Qt QML ListView 部分在超出范围时可见

Question

我在 QML 中绑定我的 ListView 时遇到问题。

我已经采用了 Qt 提供的示例（略有修改，但 Qt 示例中的确切代码具有相同的问题），并尝试将其集成到我的 window.

如下图所示，ListView应该是中间白色Rectangle的大小，但是headers部分始终可见，列表元素可见到完全从容器矩形中取出（“豚鼠”和“老虎”是完全可见的，尽管人们认为它们只有一半可见）

我确信这个错误是微不足道的，但我已经尝试了各种锚点和容器类型，但无法解决这个问题。

这是代码：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Window 2.11

Window {
    id: myWindowId
    flags: Qt.FramelessWindowHint
    visible: true
    x: 0
    y: 0
    width: 600
    height: 980
    color: "#333333"

    Rectangle {
        id: container
        x: 150
        y: 400
        width: 300
        height: 360

        ListModel {
            id: animalsModel
            ListElement { name: "Ant"; size: "Tiny" }
            ListElement { name: "Flea"; size: "Tiny" }
            ListElement { name: "Parrot"; size: "Small" }
            ListElement { name: "Guinea pig"; size: "Small" }
            ListElement { name: "Rat"; size: "Small" }
            ListElement { name: "Butterfly"; size: "Small" }
            ListElement { name: "Dog"; size: "Medium" }
            ListElement { name: "Cat"; size: "Medium" }
            ListElement { name: "Pony"; size: "Medium" }
            ListElement { name: "Koala"; size: "Medium" }
            ListElement { name: "Horse"; size: "Large" }
            ListElement { name: "Tiger"; size: "Large" }
            ListElement { name: "Giraffe"; size: "Large" }
            ListElement { name: "Elephant"; size: "Huge" }
            ListElement { name: "Whale"; size: "Huge" }
        }

        // The delegate for each section header
        Component {
            id: sectionHeading
            Rectangle {
                width: container.width
                height: childrenRect.height
                color: "lightsteelblue"

                Text {
                    text: section
                    font.bold: true
                    font.pixelSize: 20
                }
            }
        }

        ListView {
            id: view
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width
            model: animalsModel
            delegate: Text { text: name; font.pixelSize: 18; color: "red" }

            section.property: "name"
            section.criteria: ViewSection.FirstCharacter
            section.delegate: sectionHeading
        }
    }
}

有人能告诉我显示此 ListView 的正确方法吗？

Answer 1

您只是缺少 clip 属性。这告诉对象防止子对象在其边界之外绘制。 clip 默认设置为 false，因为大多数情况下不需要它并且会影响性能。

ListView {
    clip: true
    ...
}

Qt QML ListView 部分在超出范围时可见

Qt QML ListView sections visible when out of range

qt

listview

qml