在.NET MAUI中解决多CollectionView页面的滚动与高度适配问题

问题根源 #

• 直接使用VerticalStackLayout时，垂直方向的CollectionView默认高度仅适配自身内容，不会填充剩余页面空间
• 嵌套ScrollView会引发滚动冲突（CollectionView自身带滚动逻辑，外层ScrollView会干扰其布局计算），同时仍无法让垂直CollectionView占满剩余空间

解决方案：用Grid布局替代VerticalStackLayout #

通过Grid的行高分配规则，让顶部水平CollectionView自适应高度，底部垂直CollectionView占据剩余全部页面空间，利用垂直CollectionView自身的滚动能力实现页面整体无限向下滚动效果。

修改后的XAML代码：

<Grid>
    <Grid.RowDefinitions>
        <!-- 顶部水平CollectionView自适应内容高度 -->
        <RowDefinition Height="Auto"/>
        <!-- 底部垂直CollectionView占据剩余所有空间 -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 顶部水平滚动的CollectionView -->
    <CollectionView Grid.Row="0">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Horizontal"/>
        </CollectionView.ItemsLayout>
        <!-- 此处添加你的数据源与ItemTemplate -->
    </CollectionView>

    <!-- 底部垂直滚动的CollectionView（自动填充剩余空间） -->
    <CollectionView Grid.Row="1">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"/>
        </CollectionView.ItemsLayout>
        <!-- 此处添加你的数据源与ItemTemplate -->
    </CollectionView>
</Grid>

关键说明 #

1. Grid.RowDefinitions中Height="Auto"让顶部CollectionView根据内容自动调整高度，Height="*"强制底部CollectionView填充页面剩余所有空间
2. 移除外层ScrollView，避免滚动冲突，直接利用底部垂直CollectionView的原生滚动实现无限向下滚动效果
3. 顶部水平CollectionView会固定在页面顶部，底部CollectionView滚动时不会带动顶部元素，符合整体页面滚动的视觉预期

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