英文:
Itemspacing in Maui felxlayout
问题
我的应用程序包含一个滚动视图内的Flex布局。这个Flex布局用作可绑定布局，并包含一些项目。当有足够的项目填充屏幕时，垂直项目间距很好：
但是，如果列表变小，可见的项目变少，垂直间距就会变得奇怪（我怀疑项目想填满整个可用空间，但我不确定）：
我希望项目之间始终保持相同的间距。这可能吗？
XAML：
<ScrollView Margin="10" Grid.Row="1" x:Name="UserActionScrollView">
<FlexLayout x:Name="UserActionFlexLayout" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" JustifyContent="Start" Wrap="Wrap" Direction="Row">
<BindableLayout.ItemTemplate>
<DataTemplate>
-- 数据模板 --
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
英文:
My app contains a Flexlayout inside a scrollview. This flexlayout is used as a bindablelayout and contains some items. When there are enough items to fill the screen the vertical itemspacing is nicely done:
However, if the list gets smaller, and less items are visible, the vertical spacing becomes weird (I suspect the items want to fill out the whole available space, but I'm not sure of that):
I want the items to always have the same space between rows. Is this possible?
Xaml:
<ScrollView Margin="10" Grid.Row="1" x:Name="UserActionScrollView">
<FlexLayout x:Name="UserActionFlexLayout" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" JustifyContent="Start" Wrap="Wrap" Direction="Row">
<BindableLayout.ItemTemplate>
<DataTemplate>
-- Datatemplate --
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
答案1
得分: 1
根据您的代码，主轴是水平方向，有多条线。因此，您可以使用AlignContent来设置交叉轴（垂直方向）的对齐方式。
您可以这样设置：
<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">
另外，我认为您可以在这种情况下使用CollectionView。您可以自定义所需的布局。例如，您可以使用ItemsLayout属性：
<CollectionView ItemsSource="{Binding DisplayedUserActions}">
<!-- 设置3列，以及每个方向的项间距 -->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3" VerticalItemSpacing="20" HorizontalItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
另外，您不必将其放在ScrollView中，因为CollectionView可以自己滚动。
要获取更多信息，您可以参考FlexLayout和指定CollectionView布局。
希望对您有所帮助。
英文:
Based on your code, the main axis is horizontal direction with multiple lines. So you could set the alignment of cross axis(vertical direction) using AlignContent.
You could set like this:
<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">
By the way, i think you could use CollectionView instead for this case. You could customize the layout you want. For example, you could use ItemsLayout property:
<CollectionView ItemsSource="{Binding DisplayedUserActions}">
<!--set 3 columns, and itemspacing for each direction-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="3" VerticalItemSpacing="20" HorizontalItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Also, you don't have to put it in a ScrollView as CollectionView can scroll itself.
For more info, you could refer to FlexLayout and Specify CollectionView layout
Hope it works for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论