This is an old revision of the document!

All about lists

What is a model?
Models in QtQuick
ListView
GridView
Creating a model dynamically

Models in QtQuick

A model is the description of all data about a single item (i.e., a description of a “record”):
- Name
- Surname
- Telephone Number
- Favorite
- Icon
Individual items (i.e., “records”) are expressed in ListElements.
- Elements of a ListElement (i.e., “fields”) are called roles.
The ListModel element is an array ¹⁾ of ListElements.

import QtQuick 1.0
 
ListModel {
     id: listModel
 
     ListElement {
         picture: "images/user_1.png"
         name: "Adriel"
         surname: "Nunes Teles"
         telephone: "+1 347 715 3354"
         favorite: true
         icon: "sms"
     }
     ListElement {
         picture: "images/user_2.png"
         name: "Alex"
         surname: "Beek"
         telephone: "+44 79 3982 8778"
         favorite: false
         icon: "gps"
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Alexandre"
         surname: "da Rocha Lins"
         telephone: "+1 718 249 7283"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/user_3.png"
         name: "Alexandre"
         surname: "Tonin"
         telephone: "+55 81 8608 3920"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/user_4.png"
         name: "Benjamin"
         surname: "Abbott"
         telephone: "+55 11 3962 8776"
         favorite: true
         icon: "sms"
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Biln"
         surname: "Smith"
         telephone: "+32 178 8608 3920"
         favorite: false
         icon: "sms"
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Brian"
         surname: "Morris"
         telephone: "+1 718 249 7283"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/user_5.png"
         name: "Biln"
         surname: "Smith"
         telephone: "+32 178 8608 3920"
         favorite: false
         icon: "gps"
     }
     ListElement {
         picture: "images/user_6.png"
         name: "Bruno"
         surname: "Costa"
         telephone: "+55 11 8608 3920"
         favorite: true
         icon: "sms"
     }
     ListElement {
         picture: "images/user_7.png"
         name: "John"
         surname: "Appleseed"
         telephone: "+55 81 8608 3920"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Brian"
         surname: "Morris"
         telephone: "+1 718 249 7283"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Alexandre"
         surname: "Tonin"
         telephone: "+55 81 8608 3920"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/user_8.png"
         name: "Bruno"
         surname: "Costa"
         telephone: "+55 11 8608 3920"
         favorite: true
         icon: "sms"
     }
     ListElement {
         picture: "images/user_9.png"
         name: "John"
         surname: "Appleseed"
         telephone: "+55 81 8608 3920"
         favorite: false
         icon: ""
     }
     ListElement {
         picture: "images/no_user.png"
         name: "Brian"
         surname: "Morris"
         telephone: "+1 718 249 7283"
         favorite: false
         icon: ""
     }
 }

Model views

ListModels are viewed using model views.

ListView

Viewing a ListModel with a ListView requires using at least three different files:
- The ListModel:
  - An array of ListElements containing all information from each item (as given above).
- Single item view:
  - A file that has specifies how a single item should appear.

ListItemDelegate.qml

import QtQuick 1.0
 
Item {
    id: itemList
    width: 330
    height: 75
    property string intern_name: "Name"
    property string intern_surname: "Surname"
    property string intern_telephone: "555 7879"
    property string intern_icon: "gps"
    property bool intern_fav: true
 
 
    Image {
        id: icon
        width: 42
        height: 42
        source: if(intern_icon == "") { return "" } else { return "images/"+intern_icon+".png" }
    }
 
    Text {
        id: nameTxt
        font.family: "Univers LT Std"
        color: "#c8c8c8"
        font.pixelSize: 22
        text: "<b>"+ intern_name + "</b> " + intern_surname
        anchors.left: icon.right
        anchors.top: icon.top
        anchors.topMargin: 8
    }
 
    Text {
        id: phoneTxt
        font.family: "Univers LT Std"
        color: "#96999c"
        font.pixelSize: 15
        text: intern_telephone
        anchors.left: icon.right
        anchors.top: nameTxt.bottom
        anchors.topMargin: 5
    }
 
    Image {
        id: favIcon
        anchors.left: phoneTxt.right
        anchors.leftMargin: 3
        anchors.top: phoneTxt.top
        anchors.topMargin: -2
        source: if(intern_fav) { return "images/favorite.png" } else { return "" }
    }
 
}

Main file:
- Contains the ListView call, the ListModel and the Component for each single item view that will be repeated.

ListExample.qml

import QtQuick 1.0
 
Item {
    width: 360
    height: 640
 
    Image {
        id: background
        source: "images/background.jpg"
    }
 
    ListView {
        id: listExample
        width: 360
        height: 590
        anchors.top: background.top
        anchors.topMargin: 60
        anchors.left: background.left
        anchors.leftMargin: 20
        orientation: "Vertical"
        model: ListModelExample {}
        delegate: itemComponent
        clip: true
        cacheBuffer: 100
    }
 
    Component {
        id: itemComponent
        ListItemDelegate {
            width: 330
            height: 75
            intern_name: model.name
            intern_surname: model.surname
            intern_telephone: model.telephone
            intern_icon: model.icon
            intern_fav: model.favorite
        }
    }
 
    Image {
        id: shadowDetail
        source: "images/shadow_detail.png"
        anchors.top: listExample.top
    }
 
    Image {
        id: scrollbar
        height: 547
        source: "images/scroll_bar.png"
        anchors.right: background.right
        anchors.rightMargin: 2
        anchors.bottom: background.bottom
        anchors.bottomMargin: 30
    }
 
    Rectangle {
        id: scrollknob
        width: 2
        radius: 1
        color: "#858d92"
        anchors.horizontalCenter: scrollbar.horizontalCenter
        y: (listExample.visibleArea.yPosition * listExample.height) + scrollbar.y
        height: ((listExample.height/listExample.contentHeight) * listExample.height) - 45
    }
 
}

GridView

Javascript and ListModel

Animating list items

¹⁾

Really an array or some other kind of collection?

Mithat Konar (the wiki)

Table of Contents

All about lists

Models in QtQuick

Model views

ListView

GridView

Javascript and ListModel

Animating list items