如何在.NET MAUI中实现响应快速的文本输入筛选功能

问题核心原因 #

当前实现的卡顿来自三个关键点：

1. 输入字符时高频触发同步筛选，阻塞UI线程导致输入延迟
2. 通过修改每个列表项的IsVisible属性触发大量UI重绘，性能开销大
3. 无输入防抖机制，快速输入时重复执行冗余筛选逻辑

具体优化措施 #

1. 加入输入防抖（Debounce）

等待用户输入暂停后再执行筛选，避免高频触发。直接在ViewModel的FilterText属性中实现：

private CancellationTokenSource _debounceCts;
private string _filterText;

public string FilterText
{
    get => _filterText;
    set
    {
        if (_filterText != value)
        {
            _filterText = value;
            OnPropertyChanged();
            DebounceFilter();
        }
    }
}

private void DebounceFilter()
{
    _debounceCts?.Cancel();
    _debounceCts = new CancellationTokenSource();
    // 300ms为输入暂停阈值，可根据需求调整
    Task.Delay(300, _debounceCts.Token)
        .ContinueWith(_ => ApplyFilterAsync(), TaskScheduler.FromCurrentSynchronizationContext());
}

同时移除后台代码中的FilterTextEntry_TextChanged事件绑定，改为完全依赖ViewModel的属性变更触发筛选。

2. 异步筛选+后台线程处理

将筛选逻辑移至后台线程执行，避免阻塞UI线程：

public async Task ApplyFilterAsync()
{
    var filterText = FilterText?.Trim() ?? string.Empty;
    // 后台线程执行筛选，避免UI卡顿
    await Task.Run(() =>
    {
        foreach (var listItem in ListItems)
        {
            var shouldShow = string.IsNullOrWhiteSpace(filterText) 
                ? true 
                : listItem.Name.IndexOf(filterText, StringComparison.OrdinalIgnoreCase) >= 0;
            // 仅当值变化时更新，减少PropertyChanged触发次数
            if (listItem.IsVisible != shouldShow)
            {
                listItem.IsVisible = shouldShow;
            }
        }
    });
}

注意：确保列表项（ListItem）的IsVisible属性实现了INotifyPropertyChanged接口。

3. 替换ListView为CollectionView

MAUI的CollectionView性能远优于ListView，默认启用虚拟化机制，可减少非视口元素的渲染开销：

<CollectionView
    ItemsSource="{Binding ListItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="vm:MyViewModel">
            <Grid IsVisible="{Binding IsVisible}">
                <Label Text="{Binding Name}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

4. 改用过滤后的数据源替代IsVisible控制

如果列表数据量极大，直接维护一个过滤后的集合作为数据源，比修改每个项的可见性更高效：

private ObservableCollection<ListItem> _originalItems;
private ObservableCollection<ListItem> _filteredItems;

public ObservableCollection<ListItem> FilteredItems => _filteredItems;

// 初始化时加载原始数据
public MyViewModel()
{
    _originalItems = new ObservableCollection<ListItem>(获取原始数据);
    _filteredItems = new ObservableCollection<ListItem>(_originalItems);
}

public async Task ApplyFilterAsync()
{
    var filterText = FilterText?.Trim() ?? string.Empty;
    var filteredData = await Task.Run(() =>
    {
        return string.IsNullOrWhiteSpace(filterText)
            ? _originalItems.ToList()
            : _originalItems.Where(item => item.Name.IndexOf(filterText, StringComparison.OrdinalIgnoreCase) >= 0).ToList();
    });

    // 安全更新UI线程上的集合
    _filteredItems.Clear();
    foreach (var item in filteredData)
    {
        _filteredItems.Add(item);
    }
}

XAML中绑定ItemsSource="{Binding FilteredItems}"即可。

5. 移除冗余绑定

原代码中Grid和Label都绑定了IsVisible，仅保留Grid的绑定即可，Label会继承父元素的可见性：

<Grid IsVisible="{Binding IsVisible}">
    <Label Text="{Binding Name}" />
</Grid>

内容的提问来源于stack exchange，提问作者balintn