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

我的问题是：

如何减少两行之间的空间？
如果项目数少于私有行项目，如何减少项目之间的空间？

我的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>

输出：

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

我想要的是：

最佳答案

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

之所以看起来像这样，是因为无论子级如何，flex布局都会像Grid一样默认地将自身扩展到最大。

间距基于分配所有子级后剩余的面积。垂直留下了很多区域，因此行之间的空间变大了。如果使用Xamarin.UWP或Xamarin.WPF并调整应用程序窗口的大小，则可以看到行之间的空间正在改变。

因此，HorizontalOptions =“ StartAndExpand”是不必要的。

将VerticalOptions =“ Start”添加到Flex布局中（或者有时将Flex布局包装在另一个自动扩展控件（如ScrollView）中，然后将其添加到父ScrollView中），至少在我看来，该问题已解决。

当涉及到第三行时，我刚刚添加了JustifyContent =“ Start” AlignItems =“ Start”。

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

关于xaml - 如果内容按行方向放置，如何减少Flex布局中的内容之间的空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51298681/