在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.这将阻止视图在其他元素之上.
2. 将Text元素放在GridView元素之后.这将确保文本位于Gridview之上.如果未设置剪辑,则gridview项目将低于文本项目.