MAUI中iOS端CollectionView代码设置SelectedItem无效问题求助

问题描述 #

我在页面中使用CollectionView展示数据，希望预选中指定的SelectedItem。Android端该功能正常，但iOS端无效——只有用户手动选择才能改变UI状态。（左侧为Android端正常显示的预选中效果，右侧为iOS端未触发选中状态的异常效果）

复现步骤 #

使用标准MAUI模板应用，将MainPage的XAML和C#代码替换为以下内容：

XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMAUIApp.MainPage">
    <CollectionView ItemSizingStrategy="MeasureAllItems" BackgroundColor="Yellow"
                            ItemsSource="{Binding Items}"
                            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                            SelectionMode="Single">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="2"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid HeightRequest="50" WidthRequest="50">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Red"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Label Text="Text" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

C#代码 #

using System.Collections.ObjectModel;

namespace MyMAUIApp;

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        BindingContext = this;

        SelectedItem = Items[0];
        OnPropertyChanged(nameof(SelectedItem));
    }

    public ObservableCollection<string> Items { get; } = new ObservableCollection<string>(new List<string> {
        "A", "B", "C", "D"
    });

    public string SelectedItem { get; set; }
}

已尝试的无效操作 #

• 将选中逻辑移到OnAppearing()方法中，无效：

protected override void OnAppearing() {
    base.OnAppearing();
    SelectedItem = Items[0];
    OnPropertyChanged(nameof(SelectedItem));
}

• 尝试延迟后刷新Items并调用OnPropertyChanged(nameof(Items))，效果不稳定。

当前仅生效的临时方案 #

以下通过固定延迟调度的方法可以生效，但实现方式较为生硬：

public MainPage() {
    InitializeComponent();
    BindingContext = this;

    _ = Task.Run(async () => {
        await Task.Delay(100);
        Dispatcher.Dispatch(() => {
            SelectedItem = Items[0];
            OnPropertyChanged(nameof(SelectedItem));
        });
    });
}

回答 #

这确实是MAUI在iOS端的已知问题，核心原因是iOS平台CollectionView的渲染时机与数据绑定的同步逻辑不匹配：当在构造函数或OnAppearing中设置SelectedItem时，iOS端的CollectionView可能还未完成所有列表项的渲染与绑定，导致选中状态无法正确同步到UI层。

推荐以下几种更可靠的规避方案：

方案1：监听CollectionView的Loaded事件

利用控件的Loaded事件，在CollectionView完全加载完成后再设置选中项，比固定延迟更适配不同设备的性能差异：

首先在XAML中为CollectionView添加Loaded事件和命名：

<CollectionView x:Name="TargetCollectionView" Loaded="TargetCollectionView_Loaded"
                ItemSizingStrategy="MeasureAllItems" BackgroundColor="Yellow"
                ItemsSource="{Binding Items}"
                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                SelectionMode="Single">
    <!-- 原有布局和模板内容不变 -->
</CollectionView>

然后在代码后台实现事件处理：

private void TargetCollectionView_Loaded(object sender, EventArgs e)
{
    SelectedItem = Items[0];
    OnPropertyChanged(nameof(SelectedItem));
}

方案2：基于MVVM的异步初始化（更优雅）

如果项目采用MVVM模式，可以在ViewModel中通过Dispatcher的异步调度设置选中项，确保在UI线程空闲时执行：

ViewModel代码示例：

using System.Collections.ObjectModel;
using Microsoft.Maui.Dispatching;

namespace MyMAUIApp;

public class MainViewModel
{
    private readonly IDispatcher _dispatcher;

    public MainViewModel(IDispatcher dispatcher)
    {
        _dispatcher = dispatcher;
        Items = new ObservableCollection<string>(new List<string> { "A", "B", "C", "D" });
    }

    public ObservableCollection<string> Items { get; }
    public string SelectedItem { get; set; }

    public async Task InitializeAsync()
    {
        // 模拟数据加载（如果有）
        await Task.CompletedTask;
        
        // 通过Dispatcher调度到UI线程空闲时执行
        _dispatcher.Dispatch(() => 
        {
            SelectedItem = Items[0];
        });
    }
}

页面代码中调用初始化：

public partial class MainPage : ContentPage
{
    private readonly MainViewModel _viewModel;

    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();
        _viewModel = viewModel;
        BindingContext = _viewModel;
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        await _viewModel.InitializeAsync();
    }
}

方案3：自定义iOS平台渲染器（进阶）

如果上述方案仍不满足需求，可以通过自定义iOS平台的CollectionView渲染器，手动触发选中状态的更新：

在iOS平台项目中添加以下渲染器代码：

[assembly: ExportRenderer(typeof(CollectionView), typeof(CustomCollectionViewRenderer))]
namespace MyMAUIApp.Platforms.iOS
{
    public class CustomCollectionViewRenderer : CollectionViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<CollectionView> e)
        {
            base.OnElementChanged(e);
            
            if (e.NewElement != null && Control != null)
            {
                var collectionView = e.NewElement;
                // 延迟到下一个UI周期执行，确保列表项已渲染完成
                Device.BeginInvokeOnMainThread(() =>
                {
                    if (collectionView.SelectedItem != null)
                    {
                        var items = collectionView.ItemsSource.Cast<object>().ToList();
                        var index = items.IndexOf(collectionView.SelectedItem);
                        if (index >= 0)
                        {
                            Control.SelectItem(index, animated: false, scrollPosition: UICollectionViewScrollPosition.None);
                        }
                    }
                });
            }
        }
    }
}

该方案直接操作iOS原生控件，确保选中状态被正确触发，但需要注意ItemsSource的类型转换适配。

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