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

我的问题是：

 <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代码：

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

输出：

我想要的是：

---

我从未在Xamarin中使用过FlexLayout，但从我的HTML/CSS时代起，我建议您的问题在于JustifyContent=“SpaceAround”。尝试将SpaceAround更改为FlexStart

默认情况下FlexLayout没有行间距或其他参数。您需要做的是定义列编号（如4），然后将FlexLayout宽度除以列编号，并以编程方式向FlexLayout添加元素。您可以使用OnSizeChanged事件来执行此操作，并开始向FlexLayout添加子项。然后您应该设置：

方向：世界其他地区

包裹：包裹

流向：左向右

辩护内容：开始

对齐项目：开始

一些代码示例可以是：

private void FlexGallery_SizeChanged(object sender, EventArgs e)
    {
        //imageDimension = Math.Round(FlexGallery.Width / 4) ..round it with  desired method
        foreach (var it in documents.OrderBy(a => a.DateCreated))
        {
            if (Path.GetExtension(it.Url) == ".png" || Path.GetExtension(it.Url) == ".jpg")
            {
                Image img = new Image
                {
                    HeightRequest = imageDimension,
                    WidthRequest = imageDimension,
                    Margin = new Thickness(5, 5, 5, 5),
                    Source = ImageSource.FromUri(new Uri(it.Url))
                };


                FlexGallery.Children.Add(img);
            }
            else
            {

            }
        }

    }

其中imageDimension是FlexLayout除以所需的列数，并用Math.Round四舍五入

通过编程方式添加它的方法不同于在xaml中已知并定义项数的方法

此方法仅适用于比例系数为1:1的项目

您应该得到这样的结果（这是选项卡式视图，所以忽略中心的白线）：

设置

AlignContent="Start" 

在FlexLayout中

通过设置此属性，子元素将在没有行空间的情况下对齐。

---

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

它看起来像这样的原因是flex布局在默认情况下会将自身扩展到最大值，就像网格一样，不考虑子级

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

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

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

说到第三行，我刚刚添加了JustifyContent=“Start”AlignItems=“Start”

编辑：

---

将边距属性应用于每个项目，以获得项目之间的空间。

FlexLayout的AlignItems属性的神奇之处在于：

AlignItems="Stretch"

---

通过应用

JustifyContent=“Start”

它删除了两个项目之间的空格，并仅从屏幕开始放置内容，我需要的是空格+开始位置。这将解决第一个问题，但通过应用此选项，它会将所有图像彼此相邻放置，并且在一行中没有空格，我还希望两个图像之间的空间相等。谢谢您的帮助，但有一个问题是我正在使用flex布局，因为我的列号不固定，而且我的内容可以自己进行，因为它支持手机和平板电脑，列的数量每次都会改变。在上面定义的场景中，有没有办法解决这个问题？如果是的话，FlexLayout中的项目大小是否总是相同的。我可以给你一些建议。是的，目前Flex布局中的项目数量是固定的。那么项目的大小如何，它们是否总是比例为1:1？这将解决第一个问题，但通过应用此方法，它会将所有图像相邻放置，并且它们之间没有空间，我还希望两个图像之间的空间相等。如果使用使用样式的每个项目的“边距”属性？我刚刚在FlexLayout下添加了一个样式。带有setter的资源将边距设置为一个值，一切都按照我的预期工作。我在滚动视图中使用flex布局，并添加VerticalOptions=“Start”“在滚动视图中解决了我的问题。我的flex布局是这样定义的

。这将解决第一个问题，但通过应用这一点，它会将所有图像彼此相邻放置在一行中，它们之间没有空间，我还希望两个图像之间的空间相等。谢谢你的推荐。