.NET MAUI中VerticalStackLayout嵌套多CollectionView显示异常求助

以下是几种实用的解决思路，可根据你的场景选择：

方案1：禁用CollectionView内部滚动（最简单直接） #

如果不需要单个CollectionView独立滚动，直接关闭其内部滚动功能，让它自适应内容高度，这样VerticalStackLayout就能正常排列所有元素：

<ScrollView>
    <VerticalStackLayout Spacing="15">
        <Label Text="第一组数据" FontSize="Large" FontAttributes="Bold"/>
        <CollectionView ItemsSource="{Binding FirstList}" 
                        IsScrollEnabled="False" 
                        VerticalOptions="Start">
            <!-- 你的列表项模板 -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" Margin="10,5"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Label Text="第二组数据" FontSize="Large" FontAttributes="Bold"/>
        <CollectionView ItemsSource="{Binding SecondList}" 
                        IsScrollEnabled="False" 
                        VerticalOptions="Start">
            <!-- 你的列表项模板 -->
        </CollectionView>
    </VerticalStackLayout>
</ScrollView>

适用场景：数据量不大，无需单个列表独立滚动的情况。

方案2：动态绑定CollectionView高度 #

若需要保留CollectionView的内部滚动功能，可通过监听其内容尺寸变化，动态设置HeightRequest，避免固定高度限制：

XAML部分 #

<ScrollView>
    <VerticalStackLayout Spacing="15">
        <CollectionView ItemsSource="{Binding FirstList}" 
                        SizeChanged="CollectionView_SizeChanged"
                        VerticalOptions="Start">
            <!-- 列表项模板 -->
        </CollectionView>

        <CollectionView ItemsSource="{Binding SecondList}" 
                        SizeChanged="CollectionView_SizeChanged"
                        VerticalOptions="Start">
            <!-- 列表项模板 -->
        </CollectionView>
    </VerticalStackLayout>
</ScrollView>

后台代码 #

private void CollectionView_SizeChanged(object sender, EventArgs e)
{
    if (sender is CollectionView cv)
    {
        // 仅当内容高度大于0时更新，避免初始布局异常
        if (cv.ContentSize.Height > 0)
        {
            cv.HeightRequest = cv.ContentSize.Height;
        }
    }
}

适用场景：需要单个列表独立滚动，且列表长度不确定的情况。

方案3：用单个分组CollectionView替代多CollectionView #

如果多个列表是同类型数据，可将数据按分组整合，用单个带分组的CollectionView实现，彻底避免嵌套滚动冲突：

<CollectionView ItemsSource="{Binding GroupedData}" IsGrouped="True">
    <!-- 分组头部模板 -->
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding GroupTitle}" 
                   FontSize="Large" 
                   FontAttributes="Bold"
                   Margin="0,15,0,5"/>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
    
    <!-- 列表项模板 -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ItemContent}" Margin="10,5"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

适用场景：多列表为同类型数据，可通过分组区分的情况。

方案4：用CollectionView承载整个页面内容 #

将页面所有元素（标签、列表等）拆分为多个区块，用单个CollectionView作为容器，每个区块对应一个数据项，利用CollectionView原生滚动替代外层ScrollView：

<CollectionView ItemsSource="{Binding PageSections}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="{Binding SectionTitle}" 
                       FontSize="Large" 
                       FontAttributes="Bold"
                       Margin="0,15,0,5"/>
                <CollectionView ItemsSource="{Binding SectionItems}"
                                VerticalOptions="Start">
                    <!-- 列表项模板 -->
                </CollectionView>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

适用场景：页面内容可拆分为独立区块，且需要统一滚动体验的情况。

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