User Tools

Site Tools


qt-quick-for-designers-1:all_about_lists

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 1) of ListElements.
ListModelExample.qml
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

1)
FIXME Really an array or some other kind of collection?
qt-quick-for-designers-1/all_about_lists.1373002031.txt.gz · Last modified: 2013/07/05 05:27 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki