Use Sortfiltermodel to filter and sort our model

When we need to sort or filter the data in our model, we need to use Sortfiltermodel. If we just want to filter our data, we can refer to my routine "creating an Ubuntu app from scratch-a small RSS reader". In my challenge section, we can search for the items in our Xmllistmodel to get a new listmodel. In this article, we will use Sortfiltermodel to filter and sort our model so that we can more accurately display the data we need.

First, we create a relatively simple QML application and use the routines in our API pages (some of which are not working) and can do a simple example:

Import QtQuick 2.0import ubuntu.components 1.1import Ubuntu.Components.ListItems 1.0 as listitem/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!    ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Sortfiltermodel.liu-xiao-guo" /* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header. Usedeprecatedtoolbar:false width:units.gu (height:units.gu) page {title:i18n.tr ("Sortfiltermode L ") Listmodel {id:movies listelement {title:" Esign "produce R: "Chris Larkee"} listelement {title: "Elephants Dream" producer: " BlendeR "} listelement {title:" Big Buck Bunny "producer:" Blender " }} ListView {model:movies anchors.fill:parent delegate:ListItem.Su btitled {text:title Subtext:producer} section.delegate:listitem.h Eader {text:i18n.tr (section)} section.property: "title" Section.criteria:ViewSection.FirstCharac ter}}}

If we do not use the Sortfiltermodel, our display results are as follows:

If we add Sortfiltermodel:

Import QtQuick 2.0import ubuntu.components 1.1import Ubuntu.Components.ListItems 1.0 as listitem/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!    ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Sortfiltermodel.liu-xiao-guo" /* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header. Usedeprecatedtoolbar:false width:units.gu (height:units.gu) page {title:i18n.tr ("Sortfiltermode L ") Listmodel {id:movies listelement {title:" Esign "produce R: "Chris Larkee"} listelement {title: "Elephants Dream" producer: " BlendeR "} listelement {title:" Big Buck Bunny "producer:" Blender " }} sortfiltermodel {id:sortedmovies model:movies sort.property: "Ti Tle "Sort.order:Qt.DescendingOrder filter.property:" producer "Filter.pattern:/blender/ i} ListView {model:sortedmovies anchors.fill:parent delegate:listitem. subtitled {Text:title Subtext:producer} section.delegate:ListItem . Header {text:i18n.tr (section)} section.property: "title" Section.criteria:ViewSection.FirstChara Cter}}}

Note that the model of the ListView here is sortedmovies. Sortedmovies data is derived from movies. Sortfiltermodel the data in the movies in reverse alphabetical order, and simultaneously matches the producer. If it contains "blender", it will be sortedmovies in the income. The results shown are as follows:

As you can see from the display, only the items of blender are displayed, and are in reverse alphabetical order.

The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/sortfiltermodel.git

Use Sortfiltermodel to filter and sort our model