• Home
• Felgo
• SimpleRow

SimpleRow

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

• List of all members, including inherited members

Properties

• active : bool
• alignTextWithTitle : bool
• autoSizeImage : bool
• badgeColor : color
• badgeValue : string
• detailText : string
• detailTextItem : Text
• icon : Icon
• iconSource : string
• image : RoundedImage
• imageMaxSize : real
• imageSource : string
• item : var
• mouseArea : RippleMouseArea
• showDisclosure : bool
• style : StyleSimpleRow
• text : string
• textItem : Text

Signals

• selected(int index)

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.
• iconType: 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 Felgo AppSDK",
       iconType: IconType.tablet },
     { text: "Shown are:",
       detailText: "ListPage, NavigationBar with different items, Switch",
       iconType: 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
   }
 }

How do I know which list item is clicked on?

The SimpleRow::selected signal allows to handle click events on a list cell. For custom delegate items, you can add your own MouseArea for handling touch input.

 import Felgo

 App {
  NavigationStack {
    AppPage {
      title: "Clickable List Example"

      AppListView {
        delegate: SimpleRow {
          onSelected: console.log("Clicked Item #"+index+": "+JSON.stringify(modelData))
        }
        model: [
          {
            text: "Apple",
            detailText: "A delicious fruit with round shape",
            iconType: IconType.apple
          },

          {
            text: "Beer",
            detailText: "A delicous drink",
            iconType: IconType.beer
          }
        ]
      }
    }
  }
 }

How do I update ListViews dynamically?

The list view updates its UI automatically whenever the model changes - at least when you describe your model as a ListModel type.

For plain JSON-based models, the list is not notified when some data values within the JSON structure change. In this case, you can manually trigger a property-changed signal, which in turn updates the UI of the list:

 import Felgo

 App {
  NavigationStack {
    AppPage {
      id: page
      title: "Append List Item Example"

      property var listData: [
          {
            text: "Apple",
            detailText: "A delicious fruit with round shape",
            iconType: IconType.apple
          },

          {
            text: "Beer",
            detailText: "A delicous drink",
            iconType: IconType.beer
          }
        ]

      AppListView {
        id: listView
        model: page.listData
        delegate: SimpleRow {
          onSelected: {
            page.listData.push(modelData) // add copy of clicked element at end of model
            page.listDataChanged() // signal change of data to update the list
          }
        }
      }
    }
  }
 }

Property Documentation

 import Felgo

 App {
   onInitTheme: {
     // Badge styling
     Theme.listItem.badgeFontSize = 12
     Theme.listItem.badgeTextColor = "white"
     Theme.listItem.badgeBackgroundColor = "grey"
     Theme.listItem.badgeRadius = 4
   }

   ListPage {
     model: 1

     delegate: SimpleRow {
       text: "Text"
       badgeValue: "12"
     }
   }
 }

Signal Documentation