qml - 根据用户在 Qt/QML 中提供的输入对列表框项进行排序

Question

我正在尝试根据用户提供的输入对 QML ListView 中的项目列表进行排序。我已经编写了排序逻辑，但无法设置排序模型。似乎排序模型没有分配到用于原始 ListView 的实际模型。请查看代码，如果我做错了什么，请告诉我。

//main.qml

import QtQuick 1.1
Rectangle {
     id: page
     width: 500; height: 400
     color: "#edecec"
     ModifiedForSorting {
         id: search; focus: true
     }
 }

//ModifiedForSorting.qml

import QtQuick 1.1

FocusScope {
    id: focusScope
    width: 250; height: 28
    Text {
        id: typeSomething
        anchors.fill: parent; anchors.leftMargin: 8
        verticalAlignment: Text.AlignVCenter
        text: "Type here..."
        color: "gray"
        font.italic: true
    }

    MouseArea {
        anchors.fill: parent
        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }
    }

    TextInput {
        id: textInput
        anchors { left: parent.left; leftMargin: 8;rightMargin: 8; verticalCenter: parent.verticalCenter }
        focus: true
        selectByMouse: true

        onTextChanged: {
            //update list as per input from user
            container.getSortedItems(textInput.text);
            color = "red"
        }
    }
    states: State {
        name: "hasText"; when: textInput.text != ''
        PropertyChanges { target: typeSomething; opacity: 0 }
    }

    transitions: [
        Transition {
            from: ""; to: "hasText"
            NumberAnimation { exclude: typeSomething; properties: "opacity" }
        },
        Transition {
            from: "hasText"; to: ""
            NumberAnimation { properties: "opacity" }
        }
    ]

    Rectangle {
        id: container
        width: 500; height: 400
        color: "#343434"
        anchors.top: textInput.bottom
        ListModel {
            id: namesModel

            ListElement {
                title: "Mumbai"
            }
            ListElement {
                title: "Pune"
            }
            ListElement {
                title: "Bangalore"
            }
            ListElement {
                title: "Kolkata"
            }
            ListElement {
                title: "Hyderabad"
            }
            ListElement {
                title: "Nagpur"
            }
            ListElement {
                title: "Thane"
            }
        }

        // The delegate for each item in the model:
        Component {
            id: listDelegate

            Item {
                id: delegateItem
                width: listView.width; height: 55
                clip: true

                Row {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 10
                    Column {
                        anchors.verticalCenter: parent.verticalCenter

                        Text {
                            text: title
                            font.pixelSize: 15
                            color: "white"
                        }
                    }
                }
            }
        }

        function showAll() {
            var filteredItems = "";
            for (var i = 0; i < namesModel.count; i++) {

                filteredItems = filteredItems + namesModel.get(i).title;
            }
            listView.model = filteredItems;
            //namesModel = filteredItems;
        }

        function getSortedItems(searchTerm) {
            var filteredItems = "";
            if (searchTerm === "") {
                showAll();
                return;
            }

            for (var i = 0; i < namesModel.count; i++) {
                if (namesModel.get(i).title.indexOf(searchTerm) === 0) {
                    filteredItems = filteredItems + namesModel.get(i).title;
                }
            }
            listView.model = filteredItems;
            //namesModel = filteredItems;
        }

        // The ListView:
        ListView {
            id: listView
            anchors.fill: parent; anchors.margins: 20
            model: namesModel
            delegate: listDelegate
        }
    }
}

如上所示，我猜排序模型没有重新分配给 ListView。我不确定。请帮帮我。谢谢。

Answer 1

看看你的代码，我猜你的意思是 过滤 项目，而不是 排序 .

在您的函数中，您尝试分配一个字符串值 filteredItems到 listView.model属性(property)。您可能会在应用程序日志中收到一个明确的错误。

要解决此错误，您可以使用辅助 ListModel并仅使用适合您的过滤器的项目填充它。
尝试替换 listDelegate 下面的所有代码组件与此:

    ListModel{ id: filteredModel }

    function getSortedItems(searchTerm) {

        // Clear the aux model
        filteredModel.clear();

        // Add fitting items to the aux model
        for (var i = 0; i < namesModel.count; i++) {
            if (searchTerm === "" || namesModel.get(i).title.indexOf(searchTerm) === 0) {
                filteredModel.append(namesModel.get(i));
            }
        }

    }

    // The ListView:
    ListView {
        id: listView
        anchors.fill: parent; anchors.margins: 20
        model: filteredModel
        delegate: listDelegate
    }