qt - 在 QML 中的 Gridview 上方显示文本

Question

如何在 gridview 上方显示文本？我尝试了以下代码，但在滚动时，gridview 元素覆盖了文本并将其隐藏。即使我指定了 gridview 的宽度和高度，gridview 元素在滚动时也会越过边界。任何帮助表示赞赏。谢谢。

Rectangle {
width: 300; height: 400
color: "gray"

ListModel {
    id: appModel
    ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
    ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
    ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
    ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
    ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
    ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
    ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
}

Component {
    id: appDelegate

    Item {
        width: 100; height: 100

        Image {
            id: myIcon
            y: 20; anchors.horizontalCenter: parent.horizontalCenter
            source: icon
        }
        Text {
            anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
            text: name
        }
    }
}

Component {
    id: appHighlight
    Rectangle { width: 80; height: 80; color: "lightsteelblue" }
}
Text
{
    id:txt
    width: parent.width
    height: 100
    text: "8791561651"
}
GridView {
    anchors.top:txt.bottom
    height: 200
    width: parent.width
    cellWidth: 100; cellHeight: 100
    highlight: appHighlight
    focus: true
    model: appModel
    delegate: appDelegate
}
}

Answer 1

根据您想要实现的目标，您可以尝试多种方式:

1. 将 Gridview 的 clip 属性设置为 true。这将防止 View 位于其他元素之上。
2. 将 Text 元素放在 GridView 元素之后。这将确保文本位于 Gridview 的顶部。如果您不设置剪辑，则 gridview 项目将位于文本项目下方。