如何在网格中显示 ListView 项目

Question

我想在Xamarin Forms 中重新创建类似于此画廊的东西。我想要一个带有分组的ListView，它的项目显示在网格中。 我知道如何在ListView 中对项目进行分组，但我不知道如何在网格中显示项目。网格布局看起来类似于Flex Layout，但据我所知，Flex 布局无法对项目进行分组。如何在 Xamarin 中创建它？

Answer 1

您应该为此使用新的CollectionView：

例如代码：

        <CollectionView
            x:Name="collectionView"
            Margin="5"
            ItemSizingStrategy="MeasureAllItems"
            ItemsSource="{Binding Results}"
            SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        HorizontalOptions="CenterAndExpand"
                        Source="{Binding ImageSource}"
                        VerticalOptions="CenterAndExpand" />
                 </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    HorizontalItemSpacing="10"
                    Orientation="Vertical"
                    Span="2" 
                    VerticalItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <CollectionView.EmptyView>
                <StackLayout>
                    <Label
                        FontSize="Title"
                        HorizontalOptions="CenterAndExpand"
                        Text="{locale:Translate Global_No_Data_Found}"
                        VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </CollectionView.EmptyView>
        </CollectionView>

这里的 ItemsLayout 定义了您的项目的外观选项是网格和线性。 要根据图像添加日期部分，请使用组标题模板，就像 ListView 一样。 请注意，CollectionViewDataTemplates 采用 Views 而不是 ViewCells。 使用 ViewCell 将引发未指定强制转换的异常。

更多关于 CollectionView 的信息可以在这里找到：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid

如有疑问，请随时回复。