Xamarin.Forms中如何实现两个CarouselView的滚动与移动同步？

这个需求很常见，我之前做项目时也遇到过，核心就是让两个CarouselView共享同一个选中状态，给你两种实用的解决方案，你可以根据自己的项目架构选择：

方案一：MVVM绑定共享索引（推荐） #

这种方式符合MVVM架构，耦合度低，后续维护起来更省心。

1. 编写共享ViewModel #

先定义一个ViewModel，包含同步用的SelectedIndex属性，实现INotifyPropertyChanged接口来通知UI更新，同时准备好两个CarouselView的数据源：

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class CarouselSyncViewModel : INotifyPropertyChanged
{
    private int _selectedIndex;
    public int SelectedIndex
    {
        get => _selectedIndex;
        set
        {
            if (_selectedIndex != value)
            {
                _selectedIndex = value;
                OnPropertyChanged();
            }
        }
    }

    // 两个轮播的数据源
    public List<string> Carousel1Items { get; } = new List<string> { "A", "B", "C", "D" };
    public List<string> Carousel2Items { get; } = new List<string> { "E", "F", "G", "H" };

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

2. 页面XAML绑定设置 #

在页面XAML里，把两个CarouselView的SelectedIndex都绑定到ViewModel的SelectedIndex属性，同时开启双向绑定，确保两边的变化都能同步：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourProjectNamespace"
             x:Class="YourProjectNamespace.SyncCarouselPage">
    <ContentPage.BindingContext>
        <local:CarouselSyncViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="20" Spacing="20">
        <!-- 第一个轮播 -->
        <CarouselView ItemsSource="{Binding Carousel1Items}"
                      SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                      IsSynchronizedWithCurrentItem="True">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}"
                           FontSize="32"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           BackgroundColor="#f0f0f0"
                           HeightRequest="200"
                           WidthRequest="300"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <!-- 第二个轮播 -->
        <CarouselView ItemsSource="{Binding Carousel2Items}"
                      SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                      IsSynchronizedWithCurrentItem="True">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}"
                           FontSize="32"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           BackgroundColor="#f0f0f0"
                           HeightRequest="200"
                           WidthRequest="300"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>
</ContentPage>

这样不管你滚动哪个轮播，SelectedIndex都会双向同步，另一个轮播也会自动跳到对应位置。

方案二：代码后台监听事件（适合简单场景） #

如果你的页面不需要MVVM架构，直接在代码后台监听滚动事件也能实现：

1. XAML给轮播命名 #

先在XAML里给两个CarouselView设置名称，方便后台代码引用：

<StackLayout Padding="20" Spacing="20">
    <CarouselView x:Name="Carousel1"
                  ItemsSource="{Binding Carousel1Items}">
        <!-- 项模板和上面一致，省略 -->
    </CarouselView>

    <CarouselView x:Name="Carousel2"
                  ItemsSource="{Binding Carousel2Items}">
        <!-- 项模板和上面一致，省略 -->
    </CarouselView>
</StackLayout>

2. 后台绑定同步逻辑 #

在页面的OnAppearing方法里绑定CurrentItemChanged事件，当选中项变化时同步另一个轮播的索引，记得在OnDisappearing里取消订阅避免内存泄漏：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 绑定选中项变化事件
    Carousel1.CurrentItemChanged += OnCarouselItemChanged;
    Carousel2.CurrentItemChanged += OnCarouselItemChanged;
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    // 取消事件订阅
    Carousel1.CurrentItemChanged -= OnCarouselItemChanged;
    Carousel2.CurrentItemChanged -= OnCarouselItemChanged;
}

private void OnCarouselItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    var sourceCarousel = sender as CarouselView;
    if (sourceCarousel == Carousel1)
    {
        Carousel2.SelectedIndex = Carousel1.SelectedIndex;
    }
    else if (sourceCarousel == Carousel2)
    {
        Carousel1.SelectedIndex = Carousel2.SelectedIndex;
    }
}

如果需要更平滑的实时滚动同步（比如滚动过程中就跟着动，而不是只在切换选中项时），可以换成监听Scrolled事件，调用ScrollTo方法实现：

private void OnCarouselScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    var sourceCarousel = sender as CarouselView;
    if (sourceCarousel == Carousel1)
    {
        Carousel2.ScrollTo(Carousel1.SelectedIndex, ScrollToPosition.Center, animate: true);
    }
    else if (sourceCarousel == Carousel2)
    {
        Carousel1.ScrollTo(Carousel2.SelectedIndex, ScrollToPosition.Center, animate: true);
    }
}

不过Scrolled事件触发频率较高，一般用CurrentItemChanged就足够满足常规需求了。

注意事项 #

• 确保两个CarouselView的数据源长度一致，不然索引对应会出错；
• 不同版本的.NET MAUI/Xamarin.Forms可能有API细节差异，比如ScrollTo的参数，需要根据你使用的版本调整；
• MVVM方式要确保ViewModel正确设置为页面的BindingContext。

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