• Home
• Felgo
• AppListView

AppListView

A ListView providing a native AppScrollIndicator, an empty view and swipe gestures for its list delegates. More...

• List of all members, including inherited members

Properties

• backgroundColor : color
• desktopScrollEnabled : bool
• emptyText : AppText
• emptyView : Item
• scrollIndicatorVisible : bool
• scrollsToTop : bool
• showSearch : bool

Signals

• search(var term)

Methods

• getScrollPosition()
• prepareArraySections(data)
• restoreScrollPosition(data, numNewItemsOnTop)

Detailed Description

AppListView is an extension of the basic QML ListView with functionality for the Felgo AppSDK.

It adds capability for displaying a view when the list is empty, and for using SwipeOptionsContainer as ListView::delegate.

To use predefined components for often used list features, use a PullToRefreshHandler and/or VisibilityRefreshHandler together with the AppListView.

Thus we recommend using AppListView instead of ListView in your whole project.

Usage Examples

Simple AppListView

The easiest way to to use the AppListView is by choosing the SimpleRow type as the ListView::delegate. If the model is an array, the SimpleRow properties are automatically initialized with the matching array properties.

 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 }
   ]
 }

Using a model based on the ListModel type is also possible:

 AppListView {
   model: ListModel {
     ListElement { name: "Banana" }
     ListElement { name: "Apple" }
     ListElement { name: "Potato" }
   }
   delegate: SimpleRow { text: name }
 }

AppListView with Sections

Similar to the QML ListView type, sections are created by specifying a ListView::section.property and ListView::section.delegate. Just use the SimpleSection type as the delegate to get a default section look that matches the underlying platform style.

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

   section.property: "type"
   section.delegate: SimpleSection { }
 }

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

 AppListView {
   model: [] // no elements

   emptyText.text: "No items available"
 }

 AppListView {
   model: [] // no elements

   emptyView.children: [ CustomEmptyView {} ]
 }

Signal Documentation

Method Documentation

 AppListView {
   model: myModel

   function update() {
     var pos = getScrollPosition() //retrieve scroll position data
     loadMoreItems()         //adds new items to list model
     restoreScrollPosition(pos) //scrolls to the previous position
   }
 }

 AppListView {
   delegate: SimpleRow { }
   model: prepareArraySections(myArrayModel)

   section.property: "category"
   section.delegate: SimpleSection { }
 }

 AppListView {
   model: myModel

   function update() {
     var pos = getScrollPosition() //retrieve scroll position data
     loadMoreItems()         //adds new items to list model
     restoreScrollPosition(pos) //scrolls to the previous position
   }
 }