Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Presenting Data with Views

Views are containers for collections of items. They are feature-rich and can be customizable to meet style or behavior requirements.

A set of standard views are provided in the basic set of Qt Quick graphical elements:

Unlike other views, WebView is not a fully-featured view item, and needs to be combined with a Flickable item to create a view that performs like a Web browser.

These elements have properties and behaviors exclusive to each element. Visit their respective documentation for more information.

Models

Views display models onto the screen. A model could be a simple list of integer or a C++ model.

To assign a model to a view, bind the view's model property to a model.

 ListModel {
     id: petlist
     ListElement { type: "Cat" }
     ListElement { type: "Dog" }
     ListElement { type: "Mouse" }
     ListElement { type: "Rabbit" }
     ListElement { type: "Horse" }
 }
 ListView {
     id: view
     anchors.fill: parent

     model: petlist
     delegate: petdelegate
 }

For more information, consult the QML Data Models article.

View Delegates

Views need a delegate to visually represent an item in a list. A view will visualize each item list according to the template defined by the delegate. Items in a model are accessible through the index property as well as the item's properties.

 Component {
     id: petdelegate
     Text {
         id: label
         font.pixelSize: 24
         text: if (index == 0)
             label.text = type + " (default)"
         else
             text: type
     }
 }

Decorating Views

Views allow visual customization through decoration properties such as the header, footer, and section properties. By binding an object, usually another visual object, to these properties, the views are decoratable. A footer may include a Rectangle element showcasing borders or a header that displays a logo on top of the list.

Suppose that a specific club wants to decorate its members list with its brand colors. A member list is in a model and the delegate will display the model's content.

 ListModel {
     id: nameModel
     ListElement { name: "Alice" }
     ListElement { name: "Bob" }
     ListElement { name: "Jane" }
     ListElement { name: "Harry" }
     ListElement { name: "Wendy" }
 }
 Component {
     id: nameDelegate
     Text {
         text: name;
         font.pixelSize: 24
     }
 }

The club may decorate the members list by binding visual objects to the header and footer properties. The visual object may be defined inline, in another file, or in a Component element.

 ListView {
     anchors.fill: parent
     clip: true
     model: nameModel
     delegate: nameDelegate
     header: bannercomponent
     footer: Rectangle {
         width: parent.width; height: 30;
         gradient: clubcolors
     }
     highlight: Rectangle {
         width: parent.width
         color: "lightgray"
     }
 }

 Component {     //instantiated when header is processed
     id: bannercomponent
     Rectangle {
         id: banner
         width: parent.width; height: 50
         gradient: clubcolors
         border {color: "#9EDDF2"; width: 2}
         Text {
             anchors.centerIn: parent
             text: "Club Members"
             font.pixelSize: 32
         }
     }
 }
 Gradient {
     id: clubcolors
     GradientStop { position: 0.0; color: "#8EE2FE"}
     GradientStop { position: 0.66; color: "#7ED2EE"}
 }

ListView Sections

ListView contents may be grouped into sections, where related list items are labeled according to their sections. Further, the sections may be decorated with delegates.

A list may contain a list indicating people's names and the team on which team the person belongs.

 ListModel {
     id: nameModel
     ListElement { name: "Alice"; team: "Crypto" }
     ListElement { name: "Bob"; team: "Crypto" }
     ListElement { name: "Jane"; team: "QA" }
     ListElement { name: "Victor"; team: "QA" }
     ListElement { name: "Wendy"; team: "Graphics" }
 }
 Component {
     id: nameDelegate
     Text {
         text: name;
         font.pixelSize: 24
         anchors.left: parent.left
         anchors.leftMargin: 2
     }
 }

The ListView element has the section attached property that can combine adjacent and related elements into a section. The section's property property is for selecting which list element property to use as sections. The criteria can dictate how the section names are displayed and the delegate is similar to the views' delegate property.

 ListView {
     anchors.fill: parent
     model: nameModel
     delegate: nameDelegate
     focus: true
     highlight: Rectangle {
         color: "lightblue"
         width: parent.width
     }
     section {
         property: "team"
         criteria: ViewSection.FullString
         delegate: Rectangle {
             color: "#b0dfb0"
             width: parent.width
             height: childrenRect.height + 4
             Text { anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: 16
                 font.bold: true
                 text: section
             }
         }
     }
 }

Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 103
  2. Pourquoi les programmeurs sont-ils moins payés que les gestionnaires de programmes ? Manquent-ils de pouvoir de négociation ? 56
  3. «Le projet de loi des droits du développeur» : quelles conditions doivent remplir les entreprises pour que le développeur puisse réussir ? 93
  4. Les développeurs détestent-ils les antivirus ? Un programmeur manifeste sa haine envers ces solutions de sécurité 32
  5. Qt Commercial : Digia organise un webinar gratuit le 27 mars sur la conception d'interfaces utilisateur et d'applications avec le framework 0
  6. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
  7. 2017 : un quinquennat pour une nouvelle version du C++ ? Possible, selon Herb Sutter 11
Page suivante
  1. Linus Torvalds : le "C++ est un langage horrible", en justifiant le choix du C pour le système de gestion de version Git 100
  2. Comment prendre en compte l'utilisateur dans vos applications ? Pour un développeur, « 90 % des utilisateurs sont des idiots » 231
  3. Quel est LE livre que tout développeur doit lire absolument ? Celui qui vous a le plus marqué et inspiré 96
  4. Apple cède et s'engage à payer des droits à Nokia, le conflit des brevets entre les deux firmes s'achève 158
  5. Nokia porte à nouveau plainte contre Apple pour violation de sept nouveaux brevets 158
  6. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 103
  7. Quel est le code dont vous êtes le plus fier ? Pourquoi l'avez-vous écrit ? Et pourquoi vous a-t-il donné autant de satisfaction ? 83
Page suivante

Le blog Digia au hasard

Logo

Créer des applications avec un style Metro avec Qt, exemples en QML et C++, un article de Digia Qt traduit par Thibaut Cuvelier

Le blog Digia est l'endroit privilégié pour la communication sur l'édition commerciale de Qt, où des réponses publiques sont apportées aux questions les plus posées au support. Lire l'article.

Communauté

Ressources

Liens utiles

Contact

  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7-snapshot
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
 
 
Partenaires

Hébergement Web