Sunday, August 18, 2013

qml example: simple GridView vs ListView

Simple GridView:
simple GridView
simple GridView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    GridView {
        width: parent.width; height: parent.height
        cellWidth: 100; cellHeight: 20
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}


Simple ListView:
simple ListView
simple ListView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    ListView {
        width: parent.width; height: parent.height
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}