A ListView delegate item for displaying sections in a list view. More...

Import Statement: import VPlayApps 1.0
Since: V-Play 2.6.2




Detailed Description

SimpleSection is a simple item intended to be used for the ListView::section.delegate property.

It displays the title of the current section in a row, that uses colors based on the Theme configuration.

When using a ListPage, the ListView::section.delegate property is automatically set to SimpleSection.

Default Usage

The property may be used to specify the property of the ListView::model data that contains the section. The SimpleSection then automatically displays the content of the section property as the title of the section.

 AppListView {
   model: ListModel {
     ListElement { type: "Fruits"; name: "Banana" }
     ListElement { type: "Fruits"; name: "Apple" }
     ListElement { type: "Vegetables"; name: "Potato" }
   delegate: SimpleRow { text: name } "type"
   section.delegate: SimpleSection { }

Note: For implementing sections with a ListView, only models based on the ListModel type are supported by default. It is possible to use array models with the AppListView::prepareArraySections function.

Advanced Usage

The displayed section title may also be set manually. Within the section delegate, three attached properties are available per default:

  • section - Holds the value of the current section.
  • nextSection - Returns the title of the next section.
  • previousSection - The previous section.

In addition, it is possible to fully customize the internal Text item with the textItem property. Another feature is to allow click events on sections. The next example creates clickable sections with a custom title.

 AppListView {
   model: ListModel {
     ListElement { type: "Fruits"; name: "Banana" }
     ListElement { type: "Fruits"; name: "Apple" }
     ListElement { type: "Vegetables"; name: "Potato" }
   delegate: SimpleRow { text: name } "type"
   section.delegate: SimpleSection {
     title: "Category: "+section // E.g. "Category: Fruits"
     textItem.horizontalAlignment: Text.AlignHCenter // center text horizontally
     enabled: true // make section clickable
     onSelected: {
       console.log("Section Selected: "+section)

Section Styles

The SimpleSection::style property allows to either change certain styling properties or even set a completely individual style based on the StyleSimpleSection type. By default, there are already two different styles available that are based on the Theme::listSection and Theme::listSectionCompact configuration. Use the property SimpleSection::style.compactStyle to switch between these two default styles. Initially it is set to false.

Property Documentation

The StyleSimpleSection configuration sets the colors and sizes to be used for the SimpleSection. The default style uses the standard configuration of the Theme::listSection configuration. Set style.compactStyle to true in order to switch to the Theme::listSectionCompact default configuration.

textItem : alias

Allows accessing the Text item within the SimpleSection. May be used to change the font or other Text properties.

title : string

The section title to display.

Signal Documentation

selected(string section)

Emitted when this row has been clicked. The section parameter contains the section title.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support