.NET MAUI CollectionView向左无限滚动时重置至首索引问题求助

我在为.NET MAUI的CollectionView实现左右双向无限滚动功能，向右滚动加载数据的逻辑已正常工作，但向左滚动存在问题：当滚动至列表开头时，我会在ObservableCollection的索引0处插入5条新数据，此时CollectionView会自动滚动至新的首项位置，而非保持原有可见内容（例如原本可见1、2、3，插入后却显示-4、-3、-2）。

ViewModel代码 #

public void UpdateCollectionView(int mag)
{
    if (mag == 1)
    {
        for (int i = 0; i < 5; i++)
        {
            Dates.Add(new Label() { Text = (ConvertToDate(Dates[Dates.Count - 1].Text).Date.AddDays(1).ToString()) } ) ;
        }
    }
    else if (mag == -1)
    {
        for (int i = 0; i < 5; i++)
        {
            Dates.Insert(0, new Label() { Text = (ConvertToDate(Dates[0].Text).Date.AddDays(-1).ToString()) });
        }
    }
}

后台代码 #

private void collectionViewDates_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    vm.UpdateMounth(e.CenterItemIndex);
    if ((e.LastVisibleItemIndex - 5) == (vm.Dates.Count - 6))
        vm.UpdateCollectionView(1);
    else if (e.FirstVisibleItemIndex == 0)
    {
        vm.UpdateCollectionView(-1);
    }
}

XAML代码 #

<CollectionView x:Name="collectionViewDates" ItemsSource="{Binding Dates}" SelectionChanged="CollectionView_SelectionChanged"
                SelectionMode="Single" SelectedItem="{Binding SelectedItem}" ItemsUpdatingScrollMode="KeepScrollOffset" Scrolled="collectionViewDates_Scrolled"
             ItemsLayout="HorizontalList" VerticalOptions="CenterAndExpand">
    <CollectionView.ItemTemplate>
        <DataTemplate>
               
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal"></VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Transparent"></Setter>
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Border ZIndex="0" Grid.Column="0" HeightRequest="50"  WidthRequest="75" BackgroundColor="#1DABF9"
                   Padding="0" HorizontalOptions="CenterAndExpand" Margin="25,10,25,0"
                       VerticalOptions="FillAndExpand" >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="10,10,10,10">
                        </RoundRectangle>
                    </Border.StrokeShape>

                    <Label Text="{Binding Text, Converter={StaticResource StringConverter}}" TextColor="White" FontSize="18" FontAttributes="Bold" 
                               HorizontalTextAlignment="Center" VerticalTextAlignment="Center">
        
                    </Label>
                    </Border>

            </Grid>

        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

核心原因 #

在ObservableCollection头部插入数据时，即便设置了ItemsUpdatingScrollMode="KeepScrollOffset"，CollectionView的滚动偏移计算会因为项总数增加而出现偏差——原有项的位置会整体后移，导致视觉上自动滚动到了新的列表头部。

方案1：手动恢复滚动位置（最直接有效） #

通过记录插入前的可见项，插入后手动滚动到该项目的新位置，保持视觉连续性：

private void collectionViewDates_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    vm.UpdateMounth(e.CenterItemIndex);
    if ((e.LastVisibleItemIndex - 5) == (vm.Dates.Count - 6))
        vm.UpdateCollectionView(1);
    else if (e.FirstVisibleItemIndex == 0)
    {
        // 插入前记录当前第一个可见项
        var targetItem = vm.Dates[e.FirstVisibleItemIndex];
        // 执行插入操作
        vm.UpdateCollectionView(-1);
        // 找到该项的新索引（原索引0 + 插入的5条，新索引为5）
        var newIndex = vm.Dates.IndexOf(targetItem);
        // 无动画滚动到该位置，保持可见
        collectionViewDates.ScrollTo(newIndex, position: ScrollToPosition.MakeVisible, animate: false);
    }
}

方案2：反转布局与数据插入逻辑（更流畅） #

调整布局方向，将左侧加载的数据添加到集合尾部，避免头部插入导致的滚动偏移：

1. 修改CollectionView的ItemsLayout为反向水平布局：

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

2. 修改ViewModel的左侧加载逻辑，将新数据添加到集合末尾：

else if (mag == -1)
{
    for (int i = 0; i < 5; i++)
    {
        // 改为添加到末尾，而非插入头部
        Dates.Add(new Label() { Text = (ConvertToDate(Dates[0].Text).Date.AddDays(-1).ToString()) });
    }
}

注：此方案需要同步调整日期计算逻辑，确保数据顺序正确。

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

如果上述方案无法满足需求，可以针对Android/iOS编写自定义CollectionView渲染器，拦截数据更新和滚动事件，手动控制滚动偏移。此方案复杂度较高，适合需要高度定制的场景。

额外优化建议 #

• 保持ItemsUpdatingScrollMode="KeepScrollOffset"的设置，这是基础前提
• 滚动恢复时关闭动画（animate: false），减少视觉跳动
• 添加防抖逻辑（比如用Task.Delay+取消令牌），避免滚动过程中频繁触发加载操作

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