MAUI中如何让FlexLayout不浪费项之间的空间？

原生FlexLayout做不到你要的「让下一行项填充上一行空隙」的效果——因为它是严格按行布局的，每行高度由该行最高元素决定，下一行的项只能从该行起始位置开始排列。要实现类似瀑布流的排版，得换以下思路：

方案1：用CommunityToolkit.Maui的WaterfallLayout #

这是最省心的方式，官方工具包自带的瀑布流布局完美适配你的需求：

1. 先安装NuGet包CommunityToolkit.Maui
2. 替换原FlexLayout为WaterfallLayout，它会自动将项放到当前高度最低的列，自动填充空隙，还支持动态高度变化：

   <ScrollView Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalOptions="Fill" Grid.Row="1" Margin="10">
       <toolkit:WaterfallLayout Columns="你的目标列数" 
                                VerticalSpacing="自定义垂直间距" 
                                HorizontalSpacing="自定义水平间距"/>
   </ScrollView>
   

3. 当点击展开灰色区域导致项高度变化时，WaterfallLayout会自动重新计算布局，无需额外代码。

方案2：自定义瀑布流布局 #

如果不想依赖第三方库，可以自己实现一个自定义布局：

1. 创建继承自Layout<View>的类，比如CustomWaterfallLayout
2. 核心逻辑是维护每列的当前高度，每次将子项放到高度最低的列：

   public class CustomWaterfallLayout : Layout<View>
   {
       public static readonly BindableProperty ColumnCountProperty = BindableProperty.Create(nameof(ColumnCount), typeof(int), typeof(CustomWaterfallLayout), 2);
       public int ColumnCount { get => (int)GetValue(ColumnCountProperty); set => SetValue(ColumnCountProperty, value); }
   
       public static readonly BindableProperty HorizontalSpacingProperty = BindableProperty.Create(nameof(HorizontalSpacing), typeof(double), typeof(CustomWaterfallLayout), 10d);
       public double HorizontalSpacing { get => (double)GetValue(HorizontalSpacingProperty); set => SetValue(HorizontalSpacingProperty, value); }
   
       public static readonly BindableProperty VerticalSpacingProperty = BindableProperty.Create(nameof(VerticalSpacing), typeof(double), typeof(CustomWaterfallLayout), 10d);
       public double VerticalSpacing { get => (double)GetValue(VerticalSpacingProperty); set => SetValue(VerticalSpacingProperty, value); }
   
       protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
       {
           // 计算布局总尺寸的逻辑，略
           return base.OnMeasure(widthConstraint, heightConstraint);
       }
   
       protected override void LayoutChildren(double x, double y, double width, double height)
       {
           if (Children.Count == 0) return;
           
           var columnWidth = (width - (ColumnCount - 1) * HorizontalSpacing) / ColumnCount;
           var columnHeights = new double[ColumnCount];
   
           foreach (var child in Children.Where(c => c.IsVisible))
           {
               // 找到当前高度最低的列
               var minColIndex = Array.IndexOf(columnHeights, columnHeights.Min());
               var childX = x + minColIndex * (columnWidth + HorizontalSpacing);
               var childY = y + columnHeights[minColIndex];
   
               // 布局子项
               child.Measure(columnWidth, double.PositiveInfinity);
               LayoutChildIntoBoundingRegion(child, new Rect(childX, childY, columnWidth, child.DesiredSize.Height));
   
               // 更新列高度
               columnHeights[minColIndex] += child.DesiredSize.Height + VerticalSpacing;
           }
       }
   }
   

3. 在XAML中引用这个自定义布局，当子项高度变化时，调用InvalidateLayout()触发重新布局即可。

补充：你的原FlexLayout为什么不行？ #

你设置的AlignContent="SpaceAround"会让行之间均匀分配空白空间，AlignItems="Start"只是让行内项对齐顶部，但每行的高度仍然由该行最高的项决定，下一行的项无法突破行的边界去填充上一行的空隙——这是Flex布局的原生特性，没法通过调整属性改变。

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