ios - Xamarin.Forms CollectionView GridItemsLayout 相同高度的元素

Question

如何在 iOS 上CollectionView使用 a 时渲染所有具有相同高度的项目？GridItemsLayout它已经在 Android 上运行，一行中的所有元素都具有相同的高度，但在 iOS 上，它们在行的中心被垂直挤压。

这就是它目前在 iOS 上的样子（不应该是这样的......）：

这就是它目前在 Android 上的样子（它在 iOS 上也应该是这样 - 所有元素在同一行中缩放到相同的高度）：

到目前为止，这就是我的 XAML 的样子：

<CollectionView Grid.Row="1" x:Name="DataListView" ItemSizingStrategy="MeasureAllItems" ItemsSource="{Binding Data}" IsGrouped="False" ItemTemplate="{StaticResource EntryTemplate}"
                Header="{Binding Header}" Footer="{Binding Footer}" BackgroundColor="{DynamicResource DarkBackgroundColor}">
    <CollectionView.ItemsLayout>
        <!-- Span is set in OnSizeAllocated to make this "dynamic" -->
        <GridItemsLayout x:Name="GridItemsLayout" Orientation="Vertical" Span="1" />
    </CollectionView.ItemsLayout>
    <CollectionView.HeaderTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Padding="10,20">
                <Label Text="{Binding}" TextColor="{DynamicResource TextColor}" FontAttributes="Bold" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            </Grid>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Padding="{OnPlatform iOS=20 30 20 20, Default=20}">
                <Label Text="{Binding}" TextColor="{DynamicResource LightTextColor}" FontSize="Micro" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            </Grid>
        </DataTemplate>
    </CollectionView.FooterTemplate>
</CollectionView>

这是我的条目数据模板 XAML：

<DataTemplate x:Key="EntryTemplate" x:DataType="data:Entry">
    <Grid BackgroundColor="Red" VerticalOptions="FillAndExpand" Margin="0">
        <Frame WidthRequest="{Binding Converter={StaticResource FlowColumnWidthConverter}, ConverterParameter=324}" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
                BorderColor="{Binding IsActive, Converter={StaticResource ActiveToColorConverter}}" HorizontalOptions="Center" Margin="8" Padding="10" CornerRadius="5">
            <Frame.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnChecklistElementTapped" />
            </Frame.GestureRecognizers>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding Type, Converter={StaticResource TypeToEmbeddedImageConverter}}" WidthRequest="32" HeightRequest="32" Margin="4" />

                <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" LineBreakMode="TailTruncation" VerticalOptions="Start" />
                <Label Grid.Row="1" Grid.Column="1" Text="{Binding Region}" FontSize="12" LineBreakMode="TailTruncation" VerticalOptions="Start" Margin="0,-6,0,0" />

                <Label Grid.Row="2" Grid.Column="1" Text="{Binding AdditionalData}" TextType="Html" FontSize="12" LineBreakMode="WordWrap" Margin="0"
                        IsVisible="{Binding AdditionalData, Converter={StaticResource EmptyToVisibilityConverter}}" InputTransparent="True" />

                <Label Grid.Row="3" Grid.Column="1" Text="{Binding Description}" FontSize="12" LineBreakMode="WordWrap"
                        IsVisible="{Binding Description, Converter={StaticResource EmptyToVisibilityConverter}}" />

                <Switch Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" IsToggled="{Binding IsDone}" HorizontalOptions="Center" VerticalOptions="Center" />

                <StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" Orientation="Horizontal" Spacing="12" HorizontalOptions="Center" VerticalOptions="Start" Margin="0,4,0,4">
                    <controls:TintedImageButton Source="Details.png" Clicked="OnNavigateToDetailsButtonClicked" HeightRequest="32" WidthRequest="32"
                                                IsVisible="{Binding Details, Converter={StaticResource EmptyToVisibilityConverter}}"
                                                HorizontalOptions="Center" BackgroundColor="Transparent" />

                    <controls:TintedImageButton Source="Map.png" Clicked="OnNavigateToMapButtonClicked" HeightRequest="32" WidthRequest="32"
                                                HorizontalOptions="Center" BackgroundColor="Transparent" IsVisible="{x:Static resources:Metadata.MAP_ENABLED}" />
                </StackLayout>
            </Grid>
        </Frame>
    </Grid>
</DataTemplate>

这是我背后的代码（我设置应该有多少列）：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    GridItemsLayout.Span = Convert.ToInt32(Math.Floor(width / 340d));
}

任何人都有一个想法，为什么这首先在 iOS 上看起来不同，我应该查找什么来解决这个问题？

标签： iosxamarin.formscollectionview