如何在Xamarin中实现CollectionView自适应高度消除底部多余空白

解决方案 #

方法1：移除外层嵌套的ScrollView #

CollectionView自带滚动功能，如果父布局嵌套了额外的ScrollView，二者滚动逻辑冲突会触发高度计算异常，直接删掉外层ScrollView即可解决底部空白问题。

方法2：手动绑定CollectionView固定高度 #

如果业务需要外层整体滚动必须保留ScrollView，可通过绑定计算好的固定高度解决：

1. 先统计单个商品Item的总高度：你代码里Image固定200高，加上Label高度、Frame的Padding、行间距，实测得到单个Item高度（示例按230计算，可根据实际展示调整）
2. 写高度值转换器，根据数据源总数计算总高度：

public class CollectionGridHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is int count && count > 0)
        {
            // 两列布局，行数向上取整
            int rowCount = (count + 1) / 2;
            // 单个Item高度230，可根据实际调整
            return rowCount * 230;
        }
        return 0;
    }

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

3. 在XAML里绑定HeightRequest属性：

<ContentPage.Resources>
    <local:CollectionGridHeightConverter x:Key="GridHeightConverter"/>
</ContentPage.Resources>

<!-- 给CollectionView加HeightRequest绑定 -->
<CollectionView 
    SelectionMode="None" 
    ItemsLayout="VerticalGrid, 2" 
    ItemsSource="{Binding ProductInfos}"
    ItemSizingStrategy="MeasureFirstItem"
    HeightRequest="{Binding ProductInfos.Count, Converter={StaticResource GridHeightConverter}}">
    <!-- 原有ItemTemplate内容不变 -->
</CollectionView>

补充：加上ItemSizingStrategy="MeasureFirstItem"属性，会用第一个Item的高度作为所有Item的统一高度，避免逐个测量导致的高度计算误差

替代方案：用BindableLayout+FlexLayout实现 #

如果不想处理CollectionView的高度问题，可以用原生布局实现两列网格，完全不会有滚动冲突：

1. 宽度转换器代码：

public class HalfWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double totalWidth && totalWidth > 0)
        {
            // 减去左右Padding和两个Item的间距，可根据实际调整数值
            return (totalWidth - 28) / 2;
        }
        return 150;
    }

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

2. XAML代码：

<ContentPage.Resources>
    <local:HalfWidthConverter x:Key="HalfWidthConverter"/>
</ContentPage.Resources>

<ScrollView>
    <StackLayout>
        <Label Text="#Title Test"></Label>
        <FlexLayout 
            Wrap="Wrap"
            JustifyContent="SpaceBetween"
            Padding="7"
            BindableLayout.ItemsSource="{Binding ProductInfos}">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="model:ProductInfo">
                    <Frame 
                        WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type FlexLayout}}, Path=Width, Converter={StaticResource HalfWidthConverter}}"
                        Padding="7" 
                        HasShadow="False" 
                        IsClippedToBounds="True" 
                        BackgroundColor="#fff">
                        <!-- 原有Item内部布局不变 -->
                        <StackLayout Orientation="Vertical">
                            <Frame Padding="0" HasShadow="False" CornerRadius="7" IsClippedToBounds="True">
                                <StackLayout VerticalOptions="Center">
                                    <Image WidthRequest="200" HeightRequest="200" Aspect="AspectFill" Source="{Binding Images}">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer NumberOfTapsRequired="1"
                                                    Command="{Binding Source={RelativeSource AncestorType={x:Type locals:DashboardsViewModel}},
                                                    Path=ProductTappedView}" CommandParameter="{Binding .}" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                </StackLayout>
                            </Frame>
                            <StackLayout VerticalOptions="Center">
                                <Label Text="{Binding Name}" Margin="0,0,15,0" FontSize="12" HorizontalTextAlignment="Start" TextColor="#333"></Label>
                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </StackLayout>
</ScrollView>

内容的提问来源于stack exchange，提问作者Chim Di Tru