如何在.NET MAUI中实现多项展示的Carousel View？

一、用 CarouselView 直接配置实现（优先推荐） #

你不用直接切换到 Grid+Frame，.NET MAUI 的 CarouselView 本身支持多项目同时展示，只是公开示例大多聚焦单条场景，调整以下几个关键属性就能复刻截图效果：

• VisibleThreshold：设置同时可见的 Item 数量，比如设为3即可同时展示3个项目
• PeekAreaInsets：设置左右两侧露出的宽度，让非当前项部分可见，强化轮播的视觉效果
• ItemsLayout：使用LinearItemsLayout并指定水平方向，通过ItemSpacing控制项之间的间距
• ItemTemplate：自定义每个 Item 的布局，限制其宽度（比如设为设备宽度的1/3左右）

示例代码 #

<CarouselView 
    ItemsSource="{Binding YourItemList}"
    CurrentItem="{Binding SelectedItem}"
    HorizontalOptions="Center"
    PeekAreaInsets="20"
    VisibleThreshold="3">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout 
            Orientation="Horizontal"
            ItemSpacing="10"/>
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Frame 
                WidthRequest="{OnIdiom Phone=100, Tablet=150}"
                CornerRadius="8"
                Padding="10">
                <StackLayout>
                    <Image Source="{Binding ImageUrl}" HeightRequest="80"/>
                    <Label Text="{Binding Title}" FontSize="Subtitle"/>
                </StackLayout>
            </Frame>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

二、Grid + ScrollView 替代方案（当 CarouselView 不满足需求时） #

如果需要更灵活的自定义逻辑（比如非均匀宽度的项），可以用横向ScrollView嵌套Grid实现：

• 动态生成Grid.ColumnDefinitions，根据数据源创建对应数量的列
• 每个列中放置Frame或自定义布局作为项目容器
• 可监听ScrollView的滚动事件，实现选中项对齐等交互逻辑

示例代码 #

<ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Never">
    <Grid ColumnSpacing="10" Padding="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <!-- 可通过绑定或后台代码动态生成列 -->
        </Grid.ColumnDefinitions>
        <!-- 后台循环绑定数据源，为每个项创建对应Grid.Column中的内容 -->
    </Grid>
</ScrollView>

额外提示 #

• 若要实现选中项高亮，可监听CarouselView的CurrentItemChanged事件，修改对应项的样式
• 调整WidthRequest时，建议结合OnIdiom适配不同设备尺寸

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