Friday, August 2, 2013

qml example: load ListView with data from ListModel

Example of qml to load ListView with data from ListModel.

qml example: load ListView with data from ListModel
qml example: load ListView with data from ListModel

import QtQuick 2.0
import QtWebKit 3.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{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: myListModel

        delegate: Component{
            Item{
                width: parent.width
                height: 12
                Column{
                    Text {text: model.num + " : " + model.dayOfWeek}
                }
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index
                    }
                }
            }
        }

        onCurrentItemChanged: {
            myText.text = myListModel.get(myListView.currentIndex).dayOfWeek
        }
    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}