SimpleRow

A ListView delegate item with two labels and an optional image More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

Signals

Detailed Description

SimpleRow is a simple row intended to be used for ListView::delegate.

It shows a large text, a small detailText and an image or icon.

When using a ListPage, the ListView::model property is automatically set to a Component that creates SimpleRow objects.

Default Usage

SimpleRow automatically extracts properties from the ListView::model data objects. The following properties can be used:

  • text: string for the displayed text.
  • detailText: string for the displayed detailText.
  • icon: IconType for the displayed iconSource.
  • image: url for the displayed imageSource.
  • active: bool, whether the row should be highlighted.
  • visible: bool, whether the row should be shown at all.
  • enabled: bool, whether the row should be enabled, and click events emitted.

This way, the ListView::model can be chosen wisely so SimpleRow's properties do not have to be changed manually. The following code taken from the widget showcase app shows how its done:

 AppListView {
   delegate: SimpleRow {}
   model: [
     { text: "Widget test",
       detailText: "Some of the widgets available in V-Play AppSDK",
       icon: IconType.tablet },
     { text: "Shown are:",
       detailText: "ListPage, NavigationBar with different items, Switch",
       icon: IconType.question }
   ]
 }

Advanced Usage

The ListView model objects can be accessed via the item property. This way, additional functionality can be added, like changing the text based on other properties:

  AppListView {
   //some model with objects containing firstName and lastName properties
   model: DataModel.users

   delegate: SimpleRow {
     text: item ? item.firstName + " " + item.lastName : "" //override default text binding
   }
 }

Note: item is taken from the model and can be null when initializing the row object, so the item ? ... : "" checks are necessary.

Property Documentation

active : bool

Chooses whether the row should be highlighted.

By default, this is bound to item.active.


autoSizeImage : bool

Whether the image should automatically change its size to match the height of the SimpleRow. True by default.

A maximum height for the auto-sizing can bes set with the imageMaxSize property.


detailText : string

The small detail text to display at the bottom in the row.

By default, this is bound to item.detailText.


detailTextItem : Text

The Text item used for displaying the detail text.


icon : Icon

The Icon item used for displaying the iconSource.


iconSource : string

The source for the Icon to display at the left in the row. If not set, no icon is shown. Only either iconSource or imageSource should be set at a time.

By default, this is bound to item.icon.


image : RoundedImage

The RoundedImage item used for displaying the imageSource.


imageMaxSize : real

Maximum width or height of the image, if autoSizeImage is set to true.

This QML property was introduced in V-Play 2.6.2.


imageSource : string

The source for the AppImage to display at the left in the row. If not set, no image is shown. Only either iconSource or imageSource should be set at a time.

By default, this is bound to item.image.


item : var

If an array is used as the ListView::model for this row, this property contains the current element. The item is used per default for properties in SimpleRow and can also be accessed externally. If the model is not represented as an array, the SimpleRow properties cannot be initialized automatically.

It can be any JS object. When using a ListModel, item is set to null.


style : StyleSimpleRow

The StyleSimpleRow configuration sets the colors and sizes to be used for the SimpleRow. The default style uses the standard configuration of the Theme::listItem property.

This QML property was introduced in V-Play 2.6.2.


text : string

The large header text to display at the top in the row.

By default, this is bound to item.text.


textItem : Text

The Text item used for displaying the item text.


Signal Documentation

selected(int index)

Emitted when this row has been clicked. The index parameter is this row's index in the ListView model.


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
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support