Show Text above Gridview in QML

Question

How can i show text above gridview ? I tried the following code but on scrolling , gridview elements come over the text and hide it . Even though I specified the width and height of gridview , gridview elements cross there bounds on scrolling . Any help is appreciated . Thanks .

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

JuliusG JuliusG · Accepted Answer · 2012-11-08T13:58:09

There are several way that you can try depending on exactly what you want to achieve:

Set clip property of the Gridview to true. This will prevent the view from going on top of other elements.
Put the Text element after the GridView element. This will make sure that the text is on top of the Gridview. If you do not set the clip however the gridview items will go below the text items.

Show Text above Gridview in QML

1 Answers