如何在CollectionView中为Frame包裹的列表项设置行间距

给你几种实用的方案来实现Frame之间的分隔效果，根据需求选择即可：

方案一：利用CollectionView背景色+Frame底部边距（最简单） #

这种方法无需额外控件，靠布局空隙实现分隔线，代码量最少：

<AutoScrollCollectionView 
    ItemsSource="{Binding Tables}"
    BackgroundColor="#E0E0E0" <!-- 分隔线颜色 -->
    ItemSpacing="0">
    <AutoScrollCollectionView.ItemTemplate>
        <DataTemplate>
            <Frame 
                Margin="0,0,0,1" <!-- 底部边距即为分隔线高度 -->
                Padding="10" 
                CornerRadius="4" 
                BackgroundColor="White">
                <!-- 此处放置餐桌信息控件，如Label、Grid等 -->
                <Label Text="{Binding TableName}" />
            </Frame>
        </DataTemplate>
    </AutoScrollCollectionView.ItemTemplate>
</AutoScrollCollectionView>

原理：CollectionView的背景色作为分隔线颜色，每个Frame底部留1px边距，空隙处会显示出分隔线。如果介意最后一项的底部空隙，可配合转换器隐藏最后一项的底部边距。

方案二：在Frame内部添加分隔线控件（灵活自定义） #

如果需要更灵活的分隔线样式（如虚线、渐变），可以在Frame内部添加BoxView作为分隔线，同时通过转换器隐藏最后一项的分隔线：

第一步：添加XAML代码 #

<!-- 先在页面资源中声明转换器 -->
<ContentPage.Resources>
    <local:LastItemConverter x:Key="LastItemConverter" />
</ContentPage.Resources>

<AutoScrollCollectionView x:Name="TableCollectionView" ItemsSource="{Binding Tables}">
    <AutoScrollCollectionView.ItemTemplate>
        <DataTemplate>
            <Frame Padding="10" CornerRadius="4">
                <Grid RowDefinitions="Auto,1">
                    <!-- 你的餐桌内容 -->
                    <Label Grid.Row="0" Text="{Binding TableName}" />
                    <!-- 分隔线 -->
                    <BoxView 
                        Grid.Row="1" 
                        HeightRequest="1" 
                        BackgroundColor="#E0E0E0"
                        IsVisible="{Binding ., Converter={StaticResource LastItemConverter}, ConverterParameter={Binding Source={x:Reference TableCollectionView}, Path=ItemsSource}}" />
                </Grid>
            </Frame>
        </DataTemplate>
    </AutoScrollCollectionView.ItemTemplate>
</AutoScrollCollectionView>

第二步：实现LastItemConverter #

public class LastItemConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || parameter is not IEnumerable items)
            return true;

        var itemList = items.Cast<object>().ToList();
        return !itemList.Last().Equals(value);
    }

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

这种方法可随意调整分隔线的位置、颜色、样式，适合需要定制化的场景。

方案三：在Frame外部包裹布局加分隔线 #

把Frame和分隔线放在垂直布局中，逻辑与方案二类似：

<AutoScrollCollectionView x:Name="TableCollectionView" ItemsSource="{Binding Tables}">
    <AutoScrollCollectionView.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout Spacing="0">
                <Frame Padding="10" CornerRadius="4">
                    <!-- 你的内容 -->
                </Frame>
                <BoxView 
                    HeightRequest="1" 
                    BackgroundColor="#E0E0E0"
                    IsVisible="{Binding ., Converter={StaticResource LastItemConverter}, ConverterParameter={Binding Source={x:Reference TableCollectionView}, Path=ItemsSource}}" />
            </VerticalStackLayout>
        </DataTemplate>
    </AutoScrollCollectionView.ItemTemplate>
</AutoScrollCollectionView>

同样需要配合上述LastItemConverter隐藏最后一项的分隔线。

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