CollectionView加载500个复选框列表耗时过长求优化方案

1. 实现INotifyPropertyChanged接口 #

当前CheckboxItem未实现属性变更通知，会导致绑定系统做冗余检查，同时后续选中状态更新无法正确同步UI。修改模型：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class CheckboxItem : INotifyPropertyChanged
{
    private string _label;
    private bool _isSelected;

    public string Label
    {
        get => _label;
        set
        {
            _label = value;
            OnPropertyChanged();
        }
    }

    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 批量初始化ObservableCollection #

循环调用Add会触发多次CollectionChanged事件，改用List预构建数据后一次性初始化，减少事件触发开销：

var itemList = new List<CheckboxItem>();
for (int i = 1; i <= 500; i++)
{
    itemList.Add(new CheckboxItem { Label = $"Option {i}", IsSelected = false });
}
Items = new ObservableCollection<CheckboxItem>(itemList);

若需后续动态批量添加，可自行实现ObservableCollection的AddRange扩展方法，避免多次触发事件。

3. 简化ItemTemplate布局 #

移除不必要的布局嵌套，减少UI测量和排列的计算量，同时开启快速渲染：

<CollectionView ItemsSource="{Binding Items}" EnableFastRendering="True">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout VerticalOptions="Center" Padding="8">
                <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" />
                <Label Text="{Binding Label, Mode=OneWay}" VerticalOptions="Center" Margin="10,0,0,0" />
            </HorizontalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="4" />
    </CollectionView.ItemsLayout>
</CollectionView>

EnableFastRendering="True"是MAUI专属属性，可大幅提升CollectionView的渲染效率。

4. 确保虚拟化生效 #

CollectionView默认启用虚拟化，但如果父容器无确定高度，虚拟化可能失效。确保CollectionView所在父布局设置VerticalOptions="FillAndExpand"，或给CollectionView指定合适的HeightRequest，让系统仅渲染可视区域内的项。

5. 精简绑定配置 #

给Label的绑定显式指定Mode=OneWay（默认虽为OneWay，但显式声明可减少绑定系统的判断逻辑），避免不必要的双向绑定开销。

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