当我们需要对我们的Model中的数据进行排序或进行过滤时,我们需要用到SortFilterModel。如果只是想对我们的数据进行过滤的话,我们可以参考问我的例程“从零开始创建一个Ubuntu应用--一个小的RSS阅读器”。在我的挑战部分,我们可以对我们的XmlListModel中的项进行搜索,从而得到新的ListModel。在这里的文章中,我们将使用SortFilterModel来过滤和排序我们的Model,从而可以更加精准地显示我们所需要的数据。
首先,我们创建一个比较简单的QML应用,并采用我们的API页面中的例程(里面有些部分是不工作的),可以做一个简单的例子:
import QtQuick 2.0
import Ubuntu.Components 1.1
import 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"
/*
This property 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(60)
height: units.gu(85)
Page {
title: i18n.tr("sortfiltermodel")
ListModel {
id: movies
ListElement {
title: "Esign"
producer: "Chris Larkee"
}
ListElement {
title: "Elephants Dream"
producer: "Blender"
}
ListElement {
title: "Big Buck Bunny"
producer: "blender"
}
}
ListView {
model: movies
anchors.fill: parent
delegate: ListItem.Subtitled {
text: title
subText: producer
}
section.delegate: ListItem.Header { text: i18n.tr(section) }
section.property: "title"
section.criteria: ViewSection.FirstCharacter
}
}
}
如果我们没有使用到 SortFilterModel的话,我们的显示的结果如下:
如果我们加上 SortFilterModel 的话:
import QtQuick 2.0
import Ubuntu.Components 1.1
import 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"
/*
This property 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(60)
height: units.gu(85)
Page {
title: i18n.tr("sortfiltermodel")
ListModel {
id: movies
ListElement {
title: "Esign"
producer: "Chris Larkee"
}
ListElement {
title: "Elephants Dream"
producer: "Blender"
}
ListElement {
title: "Big Buck Bunny"
producer: "blender"
}
}
SortFilterModel {
id: sortedMovies
model: movies
sort.property: "title"
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.FirstCharacter
}
}
}
从显示中可以看出来,只显示blender的项,并且是以字母倒序排列的。