android - 在多列中显示重复项

问题描述

我有一个列表视图，在 Xamarin.Forms 的行中显示数据，但我想在三列中显示项目，然后在第 0 列第 1 行中显示第四项......等等。

这是我的 XAML 代码，如果您知道如何操作，我将非常感谢您的帮助！

<Grid Margin="10,5,10,5">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="1200"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Button Text="CREAR NUEVO ARTICULO" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Fill" Clicked="crearClicked"/>
    <ListView x:Name="ListaArticulos" BackgroundColor="White" VerticalOptions="Fill" Grid.Row="1" Grid.Column="0" SeparatorColor="LightGray" ItemSelected="EventClicked">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="5,0,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Articulo1}"  Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"   TextColor="DarkBlue"  />
                        <Label Text="{Binding Precio}"  Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center"   TextColor="DarkBlue"  />
                     </Grid>
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
</Grid>

标签： androidiosxamarinxamarin.forms

由于Xamarin.Forms引入了CollectionView，因此这种布局很容易实现。

去年我写了一篇博客文章并制作了简单的演示示例，CollectionView所以在这个答案中，我将向您展示代码和 gif 代码在最终形式中的外观。

使用CollectionView您可以决定要使用哪种形式的项目布局，在您的情况下，一种是具有垂直方向的 GridItemsLayout，在您的情况下，Span 属性的值将是三，因为您希望拥有三列“列表”。

这是我的演示示例应用程序中的 XAML：

<CollectionView ItemsSource="{Binding Pictures}">
                
     <CollectionView.ItemsLayout>
         <GridItemsLayout Orientation="Vertical" Span="2" />
     </CollectionView.ItemsLayout>

     <CollectionView.ItemTemplate>
         <DataTemplate>

         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView>

对于您的情况，最重要的部分是：

<GridItemsLayout Orientation="Vertical" Span="NUMBER_OF_COLUMNS" />

这将是Span="3"你的情况。

最后，如果我运行此代码，这是最终结果（在我的情况下 Span 值为 2）：

这个关于不同用法的演示示例项目CollectionView可以在我的 GitHub 存储库中找到，你可以在这里找到它。

希望这对您有所帮助，祝您编码好运！

android - 在多列中显示重复项

问题描述

解决方案

推荐阅读