.NET MAUI CollectionView项宽度不一致问题求助

我在使用.NET MAUI的CollectionView时遇到布局问题：每行要展示图片+标题+描述文本，期望所有项能撑满CollectionView宽度，但iOS模拟器中单个项宽度偏小，真机iPhone上多个项宽度不一致。

原代码示例：

<CollectionView x:Name="StatisticCollectionView"
                            BackgroundColor="Transparent"
                            ItemsSource="{x:Static statistics:StatisticSelectorViewModel.StatisticItems}">

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="15,6, 12,0" >

                            <controls:Card Padding="12">

                                <controls:Card.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Command="{Binding BindingContext.GoToStatisticCommand, Source={x:Reference Name=StatisticCollectionView}}"
                                        CommandParameter="{Binding .}" />
                                </controls:Card.GestureRecognizers>

                                <VerticalStackLayout Spacing="6"
                                                     x:DataType="statistics:StatisticSelectorTypeViewModel">
                                    <HorizontalStackLayout Spacing="6">
                                        <Image HeightRequest="15"
                                               WidthRequest="15">
                                            <Image.Source>
                                                <FontImageSource FontFamily="MaterialIcons"
                                                                 Glyph="{Binding IconGlyph}"
                                                                 Color="{AppThemeBinding Dark={StaticResource White}, Light={StaticResource Gray950}}" />
                                            </Image.Source>
                                        </Image>
                                        <Label Text="{Binding Name}" Style="{DynamicResource TextSubHead}" />
                                    </HorizontalStackLayout>
                                    <Label Text="{Binding Description}"
                                           Style="{StaticResource TextBodySecondary}" />
                                </VerticalStackLayout>
                            </controls:Card>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

出现这个问题的核心原因是CollectionView的ItemTemplate根布局没有明确设置宽度填充规则，同时Grid的右侧Padding值（12）可能触发了iOS布局计算的异常，导致项无法正确撑满父容器宽度。以下是几种可行的修复方案：

修复方案1：强制根布局宽度匹配CollectionView #

在ItemTemplate的根Grid上添加HorizontalOptions="Fill"和宽度绑定，强制根容器与CollectionView同宽，同时确保内部垂直布局也填充宽度：

<CollectionView x:Name="StatisticCollectionView"
                BackgroundColor="Transparent"
                ItemsSource="{x:Static statistics:StatisticSelectorViewModel.StatisticItems}">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="15,6,12,0" 
                  HorizontalOptions="Fill"
                  WidthRequest="{Binding Source={x:Reference StatisticCollectionView}, Path=Width}">

                <controls:Card Padding="12">
                    <controls:Card.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding BindingContext.GoToStatisticCommand, Source={x:Reference Name=StatisticCollectionView}}"
                            CommandParameter="{Binding .}" />
                    </controls:Card.GestureRecognizers>

                    <VerticalStackLayout Spacing="6"
                                         x:DataType="statistics:StatisticSelectorTypeViewModel"
                                         HorizontalOptions="Fill">
                        <HorizontalStackLayout Spacing="6">
                            <Image HeightRequest="15"
                                   WidthRequest="15">
                                <Image.Source>
                                    <FontImageSource FontFamily="MaterialIcons"
                                                     Glyph="{Binding IconGlyph}"
                                                     Color="{AppThemeBinding Dark={StaticResource White}, Light={StaticResource Gray950}}" />
                                </Image.Source>
                            </Image>
                            <Label Text="{Binding Name}" Style="{DynamicResource TextSubHead}" />
                        </HorizontalStackLayout>
                        <Label Text="{Binding Description}"
                               Style="{StaticResource TextBodySecondary}" />
                    </VerticalStackLayout>
                </controls:Card>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

修复方案2：用ContentView替代Grid作为根容器 #

ContentView在iOS上的布局计算逻辑更稳定，替换后可避免Grid Padding带来的异常：

<CollectionView.ItemTemplate>
    <DataTemplate>
        <ContentView Padding="15,6,12,0" HorizontalOptions="Fill">
            <controls:Card Padding="12">
                <!-- 内部内容保持原结构不变 -->
            </controls:Card>
        </ContentView>
    </DataTemplate>
</CollectionView.ItemTemplate>

临时替代方案优化 #

你提到的用Card的Margin替代Grid Padding的方法，可以调整为以下写法，保证边距合理的同时避免布局问题：

<Grid>
    <controls:Card Margin="15,6,12,0" Padding="12">
        <!-- 内部内容保持原结构不变 -->
    </controls:Card>
</Grid>

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