XAML 如果内容按行方向放置,如何减少Flex布局中内容之间的间距?

xpszyzbs  于 2022-12-07  发布在  其他
关注(0)|答案(4)|浏览(201)

我的问题是:

1.如何减少两行之间的间距?
1.如何减少项目之间的空间,如果项目的数量少于私有行项目?

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

输出:

"我想要的是"

hmmo2u0o

hmmo2u0o1#

我遇到了这个问题,最终我找到了原因。
之所以会这样,是因为Flex布局会将自身扩展到默认的最大值,就像Grid一样,而不管子级是什么。
间距是根据分配所有子项后剩余的区域确定的。您在垂直方向上剩余了很多区域,因此行间距变大。如果您使用Xamarin.UWP或Xamarin.WPF并调整应用程序窗口大小,您可以看到行间距正在变化。
因此,HorizontalOptions=“开始和展开”是不必要的。
VerticalOptions=“Start”添加到flex布局(或者有时,如果您将flex布局 Package 在另一个自动展开控件(如ScrollView
)中,然后将其添加到父控件ScrollView中),问题就解决了,至少在我的情况下是这样。
到第三行时,我只是添加了JustifyContent=“Start”AlignItems=“Start”

**编辑:**将Margin属性应用于每个项目,以获得项目之间的间距。

i7uaboj4

i7uaboj42#

设定

AlignContent="Start"

中的值。
通过设置此属性,子元素将无行间距地对齐。http://tecsack.com/xamarin-forms-flex-layout/

pgvzfuti

pgvzfuti3#

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

euoag5mw

euoag5mw4#

默认情况下,FlexLayout没有RowSpacing或其他参数。您需要做的是定义列号,例如4,然后根据列号调整FlexLayout宽度,并以编程方式将元素添加到FlexLayout。您可以使用OnSizeChanged事件来执行此操作,并开始将子项添加到FlexLayout。然后,您应该设置:
1.方向:列
1.环绕:环绕
1.流向:从左到右
1.对齐内容:启动时间
1.对齐项目:启动时间
代码示例如下:

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的项目。
您应该会看到类似这样的内容(这是选项卡式视图,因此忽略中间的白色):

相关问题