.NET MAUI应用中CollectionView无法完整显示所有项的问题

问题分析 #

你遇到的问题是CollectionView设置每行2个项，但仅显示前两个，删除一个后第三个才会出现，核心原因有三点：

• CollectionView嵌套在ScrollView中，两者的滚动功能冲突，导致CollectionView的高度无法自动扩展以显示所有项。
• 外层Grid的第三行高度设为Auto，限制了CollectionView的高度，仅能容纳初始可见的两个项。
• CollectionView未设置Grid.ColumnSpan="2"，仅占用Grid的第一列，宽度不足导致布局异常。

修改后的代码 #

<VerticalStackLayout>
    <Grid RowDefinitions="Auto,Auto,*" ColumnDefinitions="Auto,*" ColumnSpacing="10">
        <Grid Grid.Row="0" Grid.ColumnSpan="2">
            <SearchBar Placeholder="Search" PlaceholderColor="#49B1F9" HorizontalTextAlignment="Center" CancelButtonColor="#49B1F9"/>
        </Grid>
        <Label Grid.Row="1" Text="Choose Topic" Style="{StaticResource BaseMediumDarkLabelTextStyle}" FontSize="20" Margin="5,15" />
        <CollectionView ItemsSource="{Binding QuizesVM}"  Grid.Row="2" Grid.ColumnSpan="2" Margin="30,0,0,20">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:QuizVM">
                    <Grid RowDefinitions="Auto,Auto" Margin="8,0,8,0" HeightRequest="200">
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:QuizViewModel}},Path=GotoQuizDetailsCommand}" CommandParameter="{Binding .}"/>
                        </Grid.GestureRecognizers>
                        <Border StrokeShape="RoundRectangle 15 15 15 15 " StrokeThickness="2" HeightRequest="160">
                            <Label Grid.Row="0" Text="{Binding QuizTitle}" HorizontalOptions="Center" VerticalOptions="Center" Style="{StaticResource BaseMediumDarkLabelTextStyle}"></Label>
                        </Border>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</VerticalStackLayout>

关键修改说明 #

1. 移除ScrollView嵌套：CollectionView自带滚动功能，无需外层ScrollView，避免高度计算冲突。
2. 调整Grid行高度：将第三行的Auto改为*，让CollectionView占据剩余所有可用空间，充分展示列表项。
3. 设置ColumnSpan：给CollectionView添加Grid.ColumnSpan="2"，使其占用Grid的全部宽度，确保Span="2"的布局能正确每行显示2个项。
4. 移除固定宽度：删除ItemTemplate中Grid的WidthRequest，让项自动适配列宽，适配不同屏幕尺寸。

额外验证点 #

• 确保QuizesVM使用ObservableCollection<QuizVM>类型，这样数据更新时UI会自动刷新。
• 检查父容器是否存在其他高度限制，避免再次出现布局约束问题。

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