How To Use QML ListView

From Qt Wiki
Revision as of 15:50, 14 January 2015 by Maintenance script (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

How to Use QML ListView


ListView provides a way to visualize contents of an one-dimensional model. Data can come from QML model elements like ListModel, XmlListModel, or C++ custom model classes inherited from QAbstractListModel.

ListView has a model property which supplies data to be visualized, and has a delegate property which supplies how ( LAF ) each row in the model is visualized. ListView is provided as a part of model/view paradigm in Qt/Qt Quick.


ListView element needs to be told about the model to visualize and the delegate component to use to visualize each element of the model. This is done with model and delegate properties of ListView



Now let’s code ExampleDelegate component.


Delegate components provide a way to visualize each row of model provided in ListView. An instance of delegate component is created dynamically for each row.

Example: Separate File with Delegate Component


As you can see above, imagePath, and imageName are not properties of delegateItem, so where are they coming from? They are coming from the model of ListView. The magic is that delegate components can access roles of each ListElement it visualizes directly inside it.

Alternatively, we can place this delegate component in the same .qml file where we have ListView element.

Example: Delegate Component Embedded in Main QML file


Now, let’s create SimpleListModel model where each row has roles imagePath, and imageName

Different ways of providing Model data

As specified earlier, data for ListView can be provided with QML Model elements like ListModel, XmlListModel or C++ custom classes inherited from QAbstractListModel.


ListModel provides a way to specify model data to ListView. Each row in ListModel is constructed with ListElement.

Example: SampleListModel.qml

The above example defines a simple ListModel which can be used by a ListView. Each ListElement contains list of roles that can be directly accessed inside delegate element of ListView.
Note: Copy three images with names “1.jpb”,“2.jpg”, and “3.jpg” to folder where you have qml files.

ListModel provides methods to manipulate ListModel from JavaScript. If we start with a empty ListModel, the first item inserted in to ListModel determines the roles that will be available to delegate in ListView.

Example :

Now, roles name, and age will be available inside delegate of ListView. If we append more rows to above model with different roles, they will not be available to delegate.

Example :

In the above example, roles name, and age will not be available in delegate. Only roles imagePath, and imageName will be available.

To get row at a given index, use ListModel::get(index)
Example :

To Modify values of roles of a particular row, use ListModel::set(int index,jsobject dict) method
Example :

To set value of a particular role in a given row, use ListModel::setProperty(int index, string rolename, variant value)
Example :

To move elements inside ListModel use ListModel::move(int from, int to,int n)
Moves n items from one position to another.

To remove a row from ListModel use ListModel::remove(index) and to clear all the rows in a model call ListModel.clear()