毛伊岛 felxlayout 中的项目间距答案

【问题标题】：Itemspacing in Maui felxlayout毛伊岛 felxlayout 中的项目间距
【发布时间】：2023-02-09 13:17:10
【问题描述】：

我的应用程序在滚动视图中包含一个 Flexlayout。此 flexlayout 用作 bindablelayout 并包含一些项目。当有足够的项目填满屏幕时，垂直项目间距就很好地完成了：

但是，如果列表变小，可见的项目变少，垂直间距就会变得奇怪（我怀疑这些项目想要填满整个可用空间，但我不确定）：

我希望项目在行之间始终具有相同的空间。这可能吗？

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>

【问题讨论】：

标签： xaml layout maui

【解决方案1】：

根据您的代码，主轴是多行的水平方向。所以你可以使用设置交叉轴（垂直方向）的对齐方式对齐内容.

你可以这样设置：

<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">

另外，我认为您可以在这种情况下使用 CollectionView。您可以自定义您想要的布局。例如：

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

另外，你不必把它放在滚动视图作为集合视图可以自己滚动。

更多信息，您可以参考FlexLayout和Specify CollectionView layout

希望对你有帮助。

【讨论】：