如何在FlexLayout中设置固定行间距或消除行间距？

问题描述 #

FlexLayout会自动调整内容行之间的间距以填满整个可用区域：

需要将其设置为行之间无间距或固定间距，让行顶靠在FlexLayout顶部，下方保留未使用的空间。尝试过调整AlignItems、VerticalOptions、AlignContent等属性，但未达到预期效果：

补充说明：元素大小固定，通过代码动态添加。

原XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp3.ActivitiesPage">
    <Grid RowDefinitions="50,*,75" ColumnDefinitions="200, *">
        <ScrollView Grid.RowSpan="2" x:Name="ActScroll">
            <VerticalStackLayout x:Name="Activities" Padding="5" />
        </ScrollView>
        <Frame Padding="5" Grid.Column="1">
            <Entry x:Name="ActText" BackgroundColor="Grey" />
        </Frame>
        <FlexLayout Grid.Row="1" Grid.Column="1" x:Name="Picker" Direction="Row" Wrap="Wrap" Padding="5" />
        <HorizontalStackLayout Grid.ColumnSpan="2" Grid.Row="2" Padding="5" >
            <Button x:Name="btnAdd" Text="Add" Clicked="btnAdd_Clicked" Margin="10"/>
            <Button x:Name="btnSave" Text="Save" Margin="10" IsEnabled="False" Clicked="btnSave_Clicked"/>
            <Button x:Name="btnDelete" Text="Delete" Margin="10" IsEnabled="False" Clicked="btnDelete_Clicked"/>
        </HorizontalStackLayout>
    </Grid>
</ContentPage>

原后台代码片段 #

public ActivitiesPage()
{
    InitializeComponent();
    //color picker
    var ActColors = new Color[]
    {
        Colors.DimGray,
        Colors.DarkGray,
        Colors.Linen,
        Colors.AntiqueWhite,
        Colors.PeachPuff,
        Colors.Tan,
        Colors.BurlyWood,
        Colors.SandyBrown,
        Colors.Peru,
        Colors.Chocolate,
        Colors.Firebrick,
        Colors.DarkRed,
        Colors.Brown,
        Colors.IndianRed,
        Colors.LightCoral,
        Colors.LightPink,
        Colors.PaleVioletRed,
        Colors.HotPink,
        Colors.DeepPink,
        Colors.MediumVioletRed,
        Colors.DarkMagenta,
        Colors.DarkOrchid,
        Colors.Orchid,
        Colors.MediumPurple,
        Colors.BlueViolet,
        Colors.DarkSlateBlue,
        Colors.RoyalBlue,
        Colors.DodgerBlue,
        Colors.DeepSkyBlue,
        Colors.LightSkyBlue,
        Colors.PaleTurquoise,
        Colors.Turquoise,
        Colors.MediumTurquoise,
        Colors.Aqua,
        Colors.LightSeaGreen,
        Colors.SeaGreen,
        Colors.DarkGreen,
        Colors.ForestGreen,
        Colors.LimeGreen,
        Colors.PaleGreen,
        Colors.YellowGreen,
        Colors.Olive,
        Colors.DarkGoldenrod,
        Colors.DarkOrange,
        Colors.Gold,
        Colors.Orange,
        Colors.OrangeRed,
        Colors.Crimson,
        Colors.DarkSalmon,
        Colors.Coral,
    };

    foreach (var col in ActColors)
    {
        var btn = new Button { BackgroundColor = col };
        btn.Margin = 2;
        btn.MinimumWidthRequest = 50;
        btn.MaximumWidthRequest = 50;
        btn.MaximumHeightRequest = 50;
        btn.MinimumHeightRequest= 50;
        btn.FontSize = 12;
        btn.CornerRadius = 2;
        Picker.Add(btn);
    }
}

解决方案 #

要实现内容顶部对齐、行间距固定/无间距的效果，只需调整FlexLayout的两个关键属性：

1. 修改FlexLayout的XAML配置 #

给Picker添加AlignContent="Start"和VerticalOptions="Start"属性：

<FlexLayout Grid.Row="1" Grid.Column="1" x:Name="Picker" Direction="Row" Wrap="Wrap" Padding="5" 
            AlignContent="Start" VerticalOptions="Start" />

2. 调整行间距（可选） #

如果需要无间距，将后台代码中的btn.Margin = 2;改为btn.Margin = 0;；保留固定间距则维持原设置即可。

原理说明 #

• AlignContent="Start"：控制多行内容在FlexLayout的垂直空间内顶部对齐，不会自动分配额外间距填满区域。
• VerticalOptions="Start"：确保FlexLayout自身在Grid单元格中顶部对齐，仅占用内容所需高度，而非拉伸填满整个单元格。

内容的提问来源于stack exchange，提问作者Mike Tsayper