Xamarin.Forms嵌套CollectionView子项无法全部显示问题求助

Xamarin.Forms 中纵向滚动的 CollectionView 嵌套时会出现高度计算冲突：内层 CollectionView 默认只会占用父级 ItemTemplate 分配的固定可视区域，不会根据自身子项总高度自动撑开，因此仅能展示部分条目，手动设置超大 HeightRequest 属于 hack 方案，会严重影响控件回收性能，不推荐使用。

你的需求本身就是「分组标题+分组子项」的典型列表分组场景，完全不需要嵌套 CollectionView，直接使用 CollectionView 原生分组能力即可完美解决问题，同时性能远优于嵌套方案：

修改步骤 #

1. 调整 ViewModel 结构：让你的分组类 AnimListsList 继承 ObservableCollection<Entry>（Entry 为你原来 entries 列表的元素类型），保留原有 name 字段用于展示分组标题，原来的 entries 列表数据直接存入当前集合即可。
2. 替换原有嵌套 XAML 代码，示例如下：

<RefreshView x:Name="HomeRefreshView"
             IsRefreshing="{Binding IsBusy}"
             Command="{Binding RefreshCommand}"
             RefreshColor="White"
             BackgroundColor="DodgerBlue">
    <!-- 外层CollectionView开启分组 -->
    <CollectionView ItemsSource="{Binding AnimListsList}"
                    VerticalOptions="Fill"
                    BackgroundColor="Transparent"
                    ItemsLayout="VerticalList"
                    SelectionMode="Single"
                    SelectedItem="{Binding Entry}"
                    IsGrouped="True">
        <!-- 分组标题模板，对应原来的分组name -->
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Label Text="{Binding name}" FontSize="30"/>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <!-- 子项模板，直接复用原来内层CollectionView的ItemTemplate -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding media.Title.Romaji}"/>
                    <Label Text="{Binding progress}"/>
                    <Frame BackgroundColor="Green">
                        <StackLayout>
                            <Frame BackgroundColor="Yellow" 
                                   xct:TouchEffect.NativeAnimation="True"
                                   xct:TouchEffect.Command="{Binding BindingContext.InfoCommand, Source={x:Reference Name=AnimeListPagee}}"/>
                            <Frame BackgroundColor="Red" 
                                   xct:TouchEffect.NativeAnimation="True"
                                   xct:TouchEffect.Command="{Binding BindingContext.InfoCommand2, Source={x:Reference Name=AnimeListPagee}}"/>
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</RefreshView>

如果业务场景必须保留嵌套 CollectionView，可通过自动计算高度的方式替代硬编码超大HeightRequest：

• 给内层 CollectionView 关闭滚动：IsScrollEnabled="False"，避免和外层滚动冲突
• 给内层 CollectionView 绑定 HeightRequest，通过附加属性或者SizeChanged事件动态计算高度：

private void InnerCollectionView_SizeChanged(object sender, EventArgs e)
{
    var collectionView = sender as CollectionView;
    if (collectionView == null || collectionView.ItemsSource == null) return;
    // 按实际单个子项的高度调整，比如单个子项高度为200
    int itemHeight = 200;
    int itemCount = (collectionView.ItemsSource as ICollection).Count;
    collectionView.HeightRequest = itemCount * itemHeight;
}

• 内层CollectionView的VerticalOptions保持为Start即可

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