MAUI CollectionView初始选中项在iOS端未高亮问题求助

问题现象 #

在MAUI中，通过ViewModel提前初始化SelectedItem绑定属性后，Android端CollectionView首次渲染能正常显示选中项高亮，但iOS端UI无高亮效果——尽管绑定的Selected属性值正确（如下方文本已显示选中项为“2”）。点击任意项后，选中功能恢复正常，双向绑定也能正常工作。

复现代码 #

ViewModel 代码 #

namespace CollectionViewRepro
{
    public partial class CollectionViewData : ObservableObject
    {
        public List<string> CollectionViewElements { get; private set; }

        [ObservableProperty]
        private string selected;

        public CollectionViewData()
        {
            CollectionViewElements = new()
            {
                " 1 ",
                " 2 ",
                " 3 "
            };

            Selected = CollectionViewElements[1];
        }
    }
}

XAML 代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:collectionviewrepro="clr-namespace:CollectionViewRepro"
             x:DataType="collectionviewrepro:CollectionViewData"
             x:Class="CollectionViewRepro.MainPage">

    <VerticalStackLayout
        Margin="10,30,10,0"
        HorizontalOptions="Center">

        <Label Text="Sample Label - Centered" HorizontalTextAlignment="Center"/>

        <CollectionView ItemsSource="{Binding CollectionViewElements}" 
                        HorizontalOptions="Center" 
                        SelectionMode="Single"
                        SelectedItem="{Binding Selected}" 
                        HeightRequest="20">

            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
         </CollectionView>

        <HorizontalStackLayout Margin="0,20,0,0">
            <Label Text="This is the selected item: "/>
            <Label Text="{Binding Selected}"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>
</ContentPage>

代码后台 #

public partial class MainPage : ContentPage
{
    private CollectionViewData vm { get; set; }

    public MainPage()
    {
        vm = new CollectionViewData();
        InitializeComponent();
        BindingContext = vm;
    }
}

解决办法 #

1. 延迟设置选中项到UI渲染完成后 #

利用页面Loaded事件，延迟设置Selected属性，确保CollectionView已完成渲染：
修改后台代码：

public MainPage()
{
    vm = new CollectionViewData();
    InitializeComponent();
    BindingContext = vm;
    
    Loaded += async (s, e) =>
    {
        await Task.Delay(100); // 短延迟确保iOS端UI渲染完成
        vm.Selected = vm.CollectionViewElements[1];
    };
}

同时ViewModel构造函数中暂时不设置Selected，或者先设为null，避免提前触发绑定。

2. 自定义选中样式，通过绑定强制控制状态 #

自定义ItemTemplate，通过绑定IsSelected属性来控制选中样式，绕过iOS原生选中状态的渲染问题：
首先添加转换器：

namespace CollectionViewRepro
{
    public class BoolToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is bool isSelected && parameter is string colorPair)
            {
                var colors = colorPair.Split(',');
                return isSelected ? Color.Parse(colors[0].Trim()) : Color.Parse(colors[1].Trim());
            }
            return Colors.Transparent;
        }

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

在XAML中声明资源并修改CollectionView：

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

<!-- ... 其他代码 ... -->

<CollectionView ItemsSource="{Binding CollectionViewElements}" 
                HorizontalOptions="Center" 
                SelectionMode="Single"
                SelectedItem="{Binding Selected}" 
                HeightRequest="20">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding .}" 
                   Padding="8,4"
                   BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='LightSkyBlue,Transparent'}"
                   TextColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='White,Black'}"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"/>
    </CollectionView.ItemsLayout>
</CollectionView>

3. 手动触发属性变更通知 #

在ViewModel中设置Selected后，手动触发PropertyChanged事件（尽管ObservableProperty已自动触发，但iOS端有时需要额外触发）：
修改ViewModel构造函数：

public CollectionViewData()
{
    CollectionViewElements = new()
    {
        " 1 ",
        " 2 ",
        " 3 "
    };

    Selected = CollectionViewElements[1];
    OnPropertyChanged(nameof(Selected)); // 手动触发通知
}

4. 替代方案：使用Syncfusion ListView #

如果上述方法均无效，Syncfusion的SfListView组件跨平台兼容性更稳定，其选中状态初始化在iOS端可正常工作。替换CollectionView为SfListView后，只需设置SelectedItem绑定即可实现预期效果。

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