利用SortFilterModel来对小弟我们的Model进行过滤及排序

利用SortFilterModel来对我们的Model进行过滤及排序

当我们需要对我们的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
        }
    }
}

注意这里的ListView的model是sortedMovies。sortedMovies的数据来源于movies。SortFilterModel把movies中的数据按字母的倒序排列，并同时对producer进行匹配。如果含有“blender”，将会被收入sortedMovies中。显示的结果如下：

从显示中可以看出来，只显示blender的项，并且是以字母倒序排列的。

整个项目的源码在：git clone https://gitcafe.com/ubuntu/sortfiltermodel.git