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.

  1.                 ListModel  {
  2.     id: petlist
  3.     ListElement  { type: "Cat" }
  4.     ListElement  { type: "Dog" }
  5.     ListElement  { type: "Mouse" }
  6.     ListElement  { type: "Rabbit" }
  7.     ListElement  { type: "Horse" }
  8. }
  9. ListView  {
  10.     id: view
  11.     anchors.fill: parent
  12.  
  13.     model: petlist
  14.     delegate: petdelegate
  15. }

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.

  1.                 Component  {
  2.     id: petdelegate
  3.     Text  {
  4.         id: label
  5.         font.pixelSize: 24
  6.         text: if (index == 0)
  7.             label.text = type + " (default)"
  8.         else
  9.             text: type
  10.     }
  11. }

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.

  1.                 ListModel  {
  2.     id: nameModel
  3.     ListElement  { name: "Alice" }
  4.     ListElement  { name: "Bob" }
  5.     ListElement  { name: "Jane" }
  6.     ListElement  { name: "Harry" }
  7.     ListElement  { name: "Wendy" }
  8. }
  9. Component  {
  10.     id: nameDelegate
  11.     Text  {
  12.         text: name;
  13.         font.pixelSize: 24
  14.     }
  15. }

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.

  1.                 ListView  {
  2.     anchors.fill: parent
  3.     clip: true
  4.     model: nameModel
  5.     delegate: nameDelegate
  6.     header: bannercomponent
  7.     footer: Rectangle  {
  8.         width: parent.width; height: 30;
  9.         gradient: clubcolors
  10.     }
  11.     highlight: Rectangle  {
  12.         width: parent.width
  13.         color: "lightgray"
  14.     }
  15. }
  16.  
  17. Component  {     //instantiated when header is processed
  18.     id: bannercomponent
  19.     Rectangle  {
  20.         id: banner
  21.         width: parent.width; height: 50
  22.         gradient: clubcolors
  23.         border  {color: "#9EDDF2"; width: 2}
  24.         Text  {
  25.             anchors.centerIn: parent
  26.             text: "Club Members"
  27.             font.pixelSize: 32
  28.         }
  29.     }
  30. }
  31. Gradient  {
  32.     id: clubcolors
  33.     GradientStop  { position: 0.0; color: "#8EE2FE"}
  34.     GradientStop  { position: 0.66; color: "#7ED2EE"}
  35. }

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.

  1.                 ListModel  {
  2.     id: nameModel
  3.     ListElement  { name: "Alice"; team: "Crypto" }
  4.     ListElement  { name: "Bob"; team: "Crypto" }
  5.     ListElement  { name: "Jane"; team: "QA" }
  6.     ListElement  { name: "Victor"; team: "QA" }
  7.     ListElement  { name: "Wendy"; team: "Graphics" }
  8. }
  9. Component  {
  10.     id: nameDelegate
  11.     Text  {
  12.         text: name;
  13.         font.pixelSize: 24
  14.         anchors.left: parent.left
  15.         anchors.leftMargin: 2
  16.     }
  17. }

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.

  1.                 ListView  {
  2.     anchors.fill: parent
  3.     model: nameModel
  4.     delegate: nameDelegate
  5.     focus: true
  6.     highlight: Rectangle  {
  7.         color: "lightblue"
  8.         width: parent.width
  9.     }
  10.     section  {
  11.         property: "team"
  12.         criteria: ViewSection.FullString
  13.         delegate: Rectangle  {
  14.             color: "#b0dfb0"
  15.             width: parent.width
  16.             height: childrenRect.height + 4
  17.             Text  { anchors.horizontalCenter: parent.horizontalCenter
  18.                 font.pixelSize: 16
  19.                 font.bold: true
  20.                 text: section
  21.             }
  22.         }
  23.     }
  24. }
Notes provided by the Qt Community

No notes