Xamarin Forms：iOS端CollectionView横向列表显示异常求助

这个问题我之前帮同事排查过类似的，iOS上Xamarin.Forms的CollectionView横向布局出现重叠，大概率是因为iOS和Android的布局计算逻辑差异导致的，结合你的代码，给你几个针对性的解决办法：

1. 给列表项设置明确的宽度（最常见的解决方式） #

iOS的CollectionView在横向布局时，不会像Android那样自动根据Label内容的宽度来调整Item的尺寸，所以会导致Item挤在一起重叠。你可以给ItemTemplate里的StackLayout或者Label设置WidthRequest来固定宽度，或者根据内容动态计算：

修改后的XAML代码：

<CollectionView HeightRequest="30" SelectionMode="Single" SelectionChanged="ItemTapped" ItemsSource="{Binding Items}" x:Name="collectionview" ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 给StackLayout设置明确宽度，或者给Label设置也可以 -->
            <StackLayout Margin="5" WidthRequest="100">
                <Label TextColor="Black" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding title}"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

如果需要动态适配内容宽度，可以在后台代码里计算文本宽度后绑定给WidthRequest，不过固定宽度在大多数场景下已经能解决问题。

2. 改用更明确的LinearItemsLayout布局 #

默认的HorizontalList有时候在iOS上会有布局计算的小问题，你可以替换成LinearItemsLayout并明确配置参数，这样布局逻辑会更清晰：

<CollectionView HeightRequest="30" SelectionMode="Single" SelectionChanged="ItemTapped" ItemsSource="{Binding Items}" x:Name="collectionview">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Margin="5" WidthRequest="100">
                <Label TextColor="Black" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding title}"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

这里的ItemSpacing也能避免Item之间过度拥挤。

3. 确认Experimental Flag的配置顺序是否正确 #

虽然你提到已经添加了Forms.SetFlags("CollectionView_Experimental");，但要确保这行代码是在Forms.Init()之前调用的，iOS的AppDelegate里的正确顺序应该是：

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    Forms.SetFlags("CollectionView_Experimental");
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

如果顺序搞反了，Experimental Flag不会生效，可能导致CollectionView的布局异常。

4. 检查Xamarin.Forms版本是否存在已知bug #

如果你的Xamarin.Forms版本比较旧，可能存在CollectionView横向布局的iOS特定bug，建议升级到最新的稳定版本（比如5.x及以上，现在CollectionView已经脱离实验性特性了，甚至不需要再设置那个Flag）。升级后很多旧的布局问题都会被修复。

先从设置Item宽度开始尝试，这是解决这类问题最快的方法，大部分情况下都能解决重叠问题。

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