• Home
• Felgo
• ListPage

ListPage

A Page item with an AppListView as a single child. More...

• List of all members, including inherited members

Properties

• compactSections : bool
• delegate : alias
• emptyText : alias
• emptyView : alias
• listView : alias
• model : var
• pullToRefreshHandler : alias
• pullToRefreshHandler. : PullToRefreshHandler
• section : alias
• showSearch : alias

Signals

• clickedBackground()
• itemSelected(int index, var item)
• search(var term)

Detailed Description

The ListPage component is a convenience item wrapping a single AppListView component into a AppPage object. It also contains a PullToRefreshHandler, which can be activated by setting pullToRefreshHandler.pullToRefreshEnabled. It is disabled by default in a ListPage.

A lot of app screens consist just of a single AppListView, therefore this component can save some boilerplate code.

The contained listView comes pre-initialized with a delegate of type SimpleRow. If the section features are used, the SimpleSection type is used as the default section delegate.

Example Usage

The easiest way to create a list is to use the ListPage type. It internally uses an AppListView with a SimpleRow delegate for the list rows:

 import Felgo

 App {
  NavigationStack {
    ListPage {
      title: "Basic List Example"
      model: [
        {
          text: "Apple",
          detailText: "A delicious fruit with round shape",
          iconType: IconType.apple
        },
        {
          text: "Beer",
          detailText: "A delicous drink",
          iconType: IconType.beer
        }
      ]
    }
  }
 }

The model-delegate system also supports JSON data structures for your data model. This makes it easy to work with and display data from REST APIs.

How do I know which list item is clicked on?

The ListPage::itemSelected signal allows to handle click events on a list cell. This signal only fires when using the default SimpleRow delegate. For custom delegate items, you can add your own MouseArea for handling touch input.

 import Felgo

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

      onItemSelected: console.log("Clicked Item #"+index+": "+JSON.stringify(item))

      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 internal list view of the page 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 {
    ListPage {
      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
        }
      ]

      model: listData
      onItemSelected: {
        page.listData.push(item) // add copy of clicked element at end of model
        page.listDataChanged() // signal change of data to update the list
      }
    }
  }
 }

Property Documentation

 ListPage {
   model: [{ type: "Fruits", text: "Banana" },
     { type: "Fruits", text: "Apple" },
     { type: "Vegetables", text: "Potato" }]
   section.property: "type"
 }

Signal Documentation