ios - Xamarin 表单上的 FlexLayout，未填充项目行为？

Question

我用 Flexlayout 创建了一个简单的页面。正如预期的那样，如果行中有空项目，则项目在每一行中均匀分布，但在第二行中分布不均匀。正如您在这张图片上看到的:

这是我使用的代码:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*"/>
        <RowDefinition Height="0.8*"/>
        <RowDefinition Height="0.1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackLayout Grid.Row="0">
        <Label Text="Header Stacklayout Label" HorizontalOptions="Center"/>
    </StackLayout>
    <ScrollView  Grid.Row="1" HorizontalOptions="Start" VerticalOptions="Start">
        <FlexLayout Direction="Row" AlignItems="Start" JustifyContent="SpaceEvenly" Wrap="Wrap" >
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
            <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>

        </FlexLayout>
    </ScrollView>
    <StackLayout Grid.Row="2">
        <Label Text="Footer Stacklayout Label" HorizontalOptions="Center"/>
    </StackLayout>
</Grid>

我期望项目的间距均匀，但所有行之间的间距也相等。最后 2 个项目应该向左对齐，一个项目的空白应该在最后。我相信这就是它在 Bootstrap 和类似系统中的实现方式。

Answer 1

如果你想实现如下截图所示的 View

只需将JustifyContent的值设置为Start

<FlexLayout Direction="Row" AlignItems="Start" JustifyContent="Start" Wrap="Wrap" >
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
  <Label Text="FlexLayout" FontSize="Large" WidthRequest="120" HeightRequest="50" HorizontalTextAlignment="Center" BackgroundColor="Silver"/>
</FlexLayout>

有关 JustifyContent 的更多详细信息，您可以访问 here