如何在 Qt Quick folderListmodel 中实现搜索功能？？答案

【问题标题】：how to implement search function in Qt Quick folderListmodel ??如何在 Qt Quick folderListmodel 中实现搜索功能？？
【发布时间】：2015-04-16 12:10:52
【问题描述】：

我想为我的音乐播放器实现搜索功能，完全用 Qml 编写 .在我的情况下，我启动了一个 qml Filedialog 从文件系统获取文件夹，然后我使用 folderListModel 通过 ListView 列出它们。我想通过列表搜索任何线索我怎样才能做到这一点？？？？

请不要建议使用 c++ 。也不建议我在 foldelistmodel 中使用nameFilters :["*."]，因为它不会工作，它只能根据文件扩展名而不是文件名过滤

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

实际上nameFilters 确实允许按文件名过滤。使用一种 hack，甚至可以使其不区分大小写。

这是一个丑陋但有效的例子：

import QtQuick 2.3
import QtQuick.Controls 1.2
import Qt.labs.folderlistmodel 2.1

Item {
    width: 300
    height: 300

    FolderListModel
    {
        id: folderListModel
    }

    function updateFilter()
    {
        var text = filterField.text
        var filter = "*"
        for(var i = 0; i<text.length; i++)
            if(!caseSensitiveCheckbox.checked)
                filter+= "[%1%2]".arg(text[i].toUpperCase()).arg(text[i].toLowerCase())
            else
                filter+= text[i]
        filter+="*"
        print(filter)
        folderListModel.nameFilters = [filter]
    }

    Row
    {
        spacing: 5
        Text {text:"Filter"}
        TextField
        {
            id: filterField
            onTextChanged: updateFilter()
        }

        Text {text:"Case Sensitive"}
        CheckBox
        {
            id: caseSensitiveCheckbox
            checked: false
            onCheckedChanged:updateFilter()
        }
    }

    ListView
    {
        anchors.fill: parent
        anchors.topMargin: 30
        model:folderListModel
        delegate: Text{text: model.fileName}
    }

}

【讨论】：

谢谢你，它就像魅力一样 :) 你是我的救命稻草，我从一个多星期以来一直在挖掘这个我尝试了一切，你就像上帝一样，只用了 56 行代码和一个工作示例谢谢很多:)

【解决方案2】：

使用DelegateModel：

使用DelegateModelGroup 对委托项目进行排序和过滤。

假设你有一个使用文件名过滤文件的函数，

function willBeShownOnView(filename){ /* ... */ }

如果需要，您可以通过传递更多角色（fileSize、fileIsDir、...）或用户输入的过滤字符串来扩展此函数，并在此函数中实现过滤逻辑。

接下来，使用filterGroup 创建一个DelegateModel：

DelegateModel {
    id: delegateModel
    model: FolderListModel{id: folderModel}
    groups: [
        DelegateModelGroup {
            name: "filterGroup"; includeByDefault: true
        }
    ]
    filterOnGroup: "filterGroup"
    delegate: MyFileDisplayComponent{/* ... */}

    function applyFilter(){ /* see below */}
}

作为includeByDefault: true，folderModel 中的所有项目都包含在filterGroup 中。当我们applyFilter时，应该从这个组中删除一些项目。例如，

function applyFilter(){
    var numberOfFiles = folderModel.count;
    for (var i = 0; i < numberOfFiles; i++){
        var fileName = folderModel.get(i, "fileName");

        if (willBeShownOnView(fileName)){items.addGroups(i, 1, "filterGroup");}
        else {items.removeGroups(i, 1, "filterGroup");}
    }
}

调用applyFilter 后，只有通过willBeShownOnView 的文件才会添加到filterGroup。属性filterOnGroup: "filterGroup" 表示委托模型仅包含filterGroup 中的项目。因此，我们可以使用一个简单的 ListView 来显示结果：

ListView { 
    model: delegateModel
    //...
}

【讨论】：