MAUI怎么实现一个带搜索框的列表 CollectionView搜索过滤

来源:这里教程网 时间:2026-02-21 17:35:40 作者:

在 MAUI 中实现带搜索框的

CollectionView
搜索过滤,核心是:用
Entry
绑定搜索关键词,配合
ICollectionView.Filter
或使用
ObservableCollection
+ 手动筛选(推荐前者更轻量)。下面分步说明实用做法。

1. 准备可过滤的数据源

确保你的集合实现了

ICollectionView
接口。最简单方式是用
ObservableCollection<t></t>
初始化后,通过
CollectionViewSource.GetDefaultView()
获取视图:

在 ViewModel 中定义:
public ObservableCollection<product> Items { get; } = new();</product>
获取可过滤视图:
ItemsView = CollectionViewSource.GetDefaultView(Items);
设置
ItemsView.Filter
为一个返回
bool
的方法,比如
ApplyFilter

2. 绑定搜索框并触发过滤

在 XAML 中放一个

Entry
,绑定其
Text
属性到 ViewModel 的字符串属性(如
SearchText
),并监听
TextChanged
事件或使用
SetBinding
配合
Mode=TwoWay

每次文本变化时,调用
ItemsView.Refresh()
重新执行 Filter 方法
Filter 方法里用
SearchText
做字符串匹配(注意判空和忽略大小写)
示例判断逻辑:
return string.IsNullOrWhiteSpace(searchText) || item.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase);

3. XAML 中正确绑定 CollectionView

CollectionView
ItemsSource
要绑定到那个
ICollectionView
对象(不是原始
ObservableCollection
):

XAML:
<collectionview itemssource="{Binding ItemsView}"></collectionview>
别忘了设置
ItemTemplate
渲染每一项
如果需要空状态提示,可用
EmptyView
属性

4. 注意性能与用户体验细节

简单过滤对几百条数据足够快,但若数据量大或匹配逻辑复杂,可加防抖(debounce):

Task.Delay
延迟触发
Refresh()
,避免每敲一个字都刷一次
搜索框右侧加个“清空”按钮(
Button
+
Command
),一键设
SearchText = ""
并刷新
过滤时保持滚动位置(MAUI 默认会重置,目前无内置方案,可记录索引+手动恢复,但中小项目通常可忽略)

基本上就这些。不需要第三方库,纯 MAUI 原生能力就能搞定。关键点就两个:用

ICollectionView.Filter
而不是自己维护两套集合;确保
ItemsSource
绑的是视图对象,不是原始集合。

相关推荐