如何在Qt Quick folderListmodel中实现搜索功能??
how to implement search function in Qt Quick folderListmodel ??
我想为我的音乐播放器实现搜索功能,完全用 Qml 编写
.在我的例子中,我启动了一个 qml Filedialog 以从文件系统获取文件夹,然后我使用 folderListModel 通过 ListView 列出它们。
我想在列表中搜索任何线索我怎样才能做到这一点????
请不要建议使用c++。并且也不建议我在 foldelistmodel 中使用 nameFilters :["*."]
因为它不会工作它只根据文件扩展名而不是文件名过滤
实际上 nameFilters
允许按文件名过滤。使用一种技巧,甚至可以使其不区分大小写。
这是一个丑陋但有效的例子:
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}
}
}
with DelegateModelGroup to sort and filter delegate items.
假设您有使用文件名过滤文件的功能,
function willBeShownOnView(filename){ /* ... */ }
如果需要,您可以通过传递更多角色(fileSize
、fileIsDir
、...)或过滤用户输入的字符串来扩展此功能,并在该功能内实现过滤逻辑。
接下来,创建一个 DelegateModel
和 filterGroup
:
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
//...
}
我想为我的音乐播放器实现搜索功能,完全用 Qml 编写 .在我的例子中,我启动了一个 qml Filedialog 以从文件系统获取文件夹,然后我使用 folderListModel 通过 ListView 列出它们。 我想在列表中搜索任何线索我怎样才能做到这一点????
请不要建议使用c++。并且也不建议我在 foldelistmodel 中使用 nameFilters :["*."]
因为它不会工作它只根据文件扩展名而不是文件名过滤
实际上 nameFilters
允许按文件名过滤。使用一种技巧,甚至可以使其不区分大小写。
这是一个丑陋但有效的例子:
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}
}
}
with DelegateModelGroup to sort and filter delegate items.
假设您有使用文件名过滤文件的功能,
function willBeShownOnView(filename){ /* ... */ }
如果需要,您可以通过传递更多角色(fileSize
、fileIsDir
、...)或过滤用户输入的字符串来扩展此功能,并在该功能内实现过滤逻辑。
接下来,创建一个 DelegateModel
和 filterGroup
:
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
//...
}