MAUI中CollectionView按钮选中状态异常问题求助

问题原因 #

你的代码在Android上出现异常，核心原因是Android端CollectionView基于RecyclerView实现，会复用Item模板。直接通过后台代码操作Button实例的方式，无法处理Item复用场景：当滚动列表时，之前被设置为激活色的Button实例会被重新绑定给新的数据项，导致未点击的按钮也显示激活状态；同时你的临时变量仅记录最后一个点击的按钮，无法覆盖所有复用的Item。

解决方案 #

推荐采用MVVM绑定的方式处理，从数据层面控制按钮状态，彻底规避控件复用带来的问题：

1. 扩展数据模型，增加选中状态属性 #

给Character类添加IsSelected属性并实现INotifyPropertyChanged，用于标记当前项是否被选中：

public class Character : INotifyPropertyChanged
{
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    // 保留你的原有属性...

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在ViewModel中处理选中逻辑 #

ViewModel中维护选中项，点击时重置所有项的选中状态，再标记当前项为选中：

public class YourViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Character> Characters { get; set; } = new();

    private Character _selectedCharacter;
    public Character SelectedCharacter
    {
        get => _selectedCharacter;
        set
        {
            if (_selectedCharacter != value)
            {
                // 重置所有项的选中状态
                foreach (var character in Characters)
                {
                    character.IsSelected = false;
                }
                _selectedCharacter = value;
                _selectedCharacter?.IsSelected = true;
                OnPropertyChanged();
            }
        }
    }

    // 按钮点击命令
    public ICommand SelectCharacterCommand => new Command<Character>(character =>
    {
        SelectedCharacter = character;
    });

    // 实现INotifyPropertyChanged接口...
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. 修改XAML绑定状态 #

通过转换器将IsSelected属性映射为按钮背景色，同时绑定点击命令：
首先创建颜色转换器：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Color.FromArgb("daa520") : Colors.DarkGray;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后修改XAML：

<ContentPage.Resources>
    <converters:BoolToColorConverter x:Key="BoolToColorConverter" />
</ContentPage.Resources>

<CollectionView ItemsSource="{Binding Characters}" ItemsLayout="HorizontalList" SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="characters:Character">
            <HorizontalStackLayout Margin="10">
                <Button Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:YourViewModel}}, Path=SelectCharacterCommand}"
                        CommandParameter="{Binding .}"
                        BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}}" />
            </HorizontalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

替代方案（非MVVM） #

如果不想采用MVVM，可通过遍历可视Item重置按钮状态，但性能和可靠性不如MVVM：

1. 给按钮添加x:Name="btnCharacter"
2. 修改后台代码：

private void Button_Clicked(object sender, EventArgs e)
{
    // 遍历所有可视Item，重置按钮颜色
    foreach (var item in myCollectionView.VisibleItems)
    {
        var view = myCollectionView.ItemTemplate.CreateContent() as View;
        view.BindingContext = item;
        var button = view.FindByName<Button>("btnCharacter");
        button?.BackgroundColor = Colors.DarkGray;
    }

    // 设置当前按钮激活色
    var currentBtn = sender as Button;
    currentBtn.BackgroundColor = Color.FromArgb("daa520");
}

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