如果内容按行方向放置，如何减少 Flex 布局中内容之间的空间？

Question

我的问题是：

1. 如何减少两行之间的空间？
2. 如果项目数量少于隐私行项目，如何减少项目之间的空间？

我的xaml代码：

 <FlexLayout Wrap="Wrap" AlignItems="Start" Direction="Row" JustifyContent="SpaceAround"  HorizontalOptions="StartAndExpand">
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
</FlexLayout>

输出：

我想要的是：

Answer 1

我遇到了这个问题，最终我找到了原因。

它看起来像这样的原因是 flex 布局将在默认情况下将自身扩展到最大值，就像 Grid 所做的那样，而不管子项如何。

间距基于分配所有子项后剩余的区域。您在 verizontally 上留下了很多区域，因此行之间的空间变大了。如果您使用 Xamarin.UWP 或 Xamarin.WPF 并调整应用程序窗口的大小，您可以看到行之间的空间正在发生变化。

因此，Horizo​​ntalOptions="StartAndExpand"是不必要的。

将VerticalOptions="Start"添加到 flex 布局（或者有时如果您将 flex 布局包装在另一个自动展开控件中，例如ScrollView，然后将其添加到父ScrollView）并且问题解决了，至少在我的情况下。

说到第三行，我只是添加了JustifyContent="Start" AlignItems="Start"。

编辑： 将 Margin 属性应用于每个项目，以获取项目之间的空间。