我的问题是:
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>
输出:
"我想要的是"
4条答案
按热度按时间hmmo2u0o1#
我遇到了这个问题,最终我找到了原因。
之所以会这样,是因为Flex布局会将自身扩展到默认的最大值,就像Grid一样,而不管子级是什么。
间距是根据分配所有子项后剩余的区域确定的。您在垂直方向上剩余了很多区域,因此行间距变大。如果您使用Xamarin.UWP或Xamarin.WPF并调整应用程序窗口大小,您可以看到行间距正在变化。
因此,HorizontalOptions=“开始和展开”是不必要的。
将VerticalOptions=“Start”添加到flex布局(或者有时,如果您将flex布局 Package 在另一个自动展开控件(如ScrollView)中,然后将其添加到父控件ScrollView中),问题就解决了,至少在我的情况下是这样。
到第三行时,我只是添加了JustifyContent=“Start”AlignItems=“Start”。
**编辑:**将Margin属性应用于每个项目,以获得项目之间的间距。
i7uaboj42#
设定
中的值。
通过设置此属性,子元素将无行间距地对齐。http://tecsack.com/xamarin-forms-flex-layout/
pgvzfuti3#
我从未在Xamarin中使用过FlexLayout,但从我的HTML/CSS时代起,我建议您的问题是JustifyContent=“SpaceAround”。尝试将SpaceAround更改为FlexStart
euoag5mw4#
默认情况下,FlexLayout没有RowSpacing或其他参数。您需要做的是定义列号,例如4,然后根据列号调整FlexLayout宽度,并以编程方式将元素添加到FlexLayout。您可以使用OnSizeChanged事件来执行此操作,并开始将子项添加到FlexLayout。然后,您应该设置:
1.方向:列
1.环绕:环绕
1.流向:从左到右
1.对齐内容:启动时间
1.对齐项目:启动时间
代码示例如下:
其中imageDimension是FlexLayout除以所需列数,并使用Math.Round进行舍入。
通过编程方式添加的方法与条目数已知并在xaml中定义的方法不同。
此方法仅适用于比例系数为1:1的项目。
您应该会看到类似这样的内容(这是选项卡式视图,因此忽略中间的白色):