问题描述
我想显示 FlexLayout 中显示的 List 中的项目。我希望这些项目具有相同的宽度和相同的水平和垂直间距。下图显示了一个例子。
我尝试使用 CollectionView,我的 XAML 如下所示:
<CollectionView ItemsSource="{Binding Cards}" Margin="10,10,10"
>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3"
HorizontalItemSpacing="10"
VerticalItemSpacing="10"
/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid HeightRequest="200" BackgroundColor="{Binding BackGroundColor}">
<Label Text="{Binding Text}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
我尝试使用 ItemSizingStrategy="MeasureFirstItem" 但它没有按我想要的那样工作。
有没有更好的方法来实现它?
感谢大家的帮助。
解决方法
有很多解决方案可以实现它。例如,您可以创建自定义 StackLayout .
public class SquareView : StackLayout
{
protected override void OnSizeAllocated(double width,double height)
{
base.OnSizeAllocated(width,height);
HeightRequest = Width;
}
}
在 xaml 中
<CollectionView x:Name="list" Margin="10,10,10">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3"
/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:SquareView BackgroundColor="LightBlue">
<Label Text="11111" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
</local:SquareView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>