SwiftUI LazyVGrid cell height in iOS 14 vs 15

Question

I have some code that was working in iOS 14, but in 15, isn’t quite. The cells pictured below can have one or two lines of title. In iOS 14 (on the right), the Spacer() element between the title and the listing count text expands as expected so that the cells are all the same height. In iOS 15, it does not, and the cell shrinks, and gets centered in its row (see the “A-Train” item).

The code for the cell looks like:

ZStack
{
    Color.white
        .cornerRadius(8)
    
    VStack(alignment: .leading, spacing: 0)
    {
        //  Listing Image…
        
        GeometryReader
        { geom in
            KFImage(self.imageURL)
                .cancelOnDisappear(true)
                .placeholder {
                    Image("product-placeholder")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: geom.size.width, height: geom.size.width)
                }
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geom.size.width, height: geom.size.width)
                .cornerRadius(4)
                .clipped()
        }
        .aspectRatio(contentMode: .fit)
        .padding(.bottom, 12)
        
        //  Title…
        
        Text("\(self.title)")
            .font(.custom("Poppins", size: 14.0).weight(.semibold))
            .multilineTextAlignment(.leading)
            .lineLimit(2)
            
        Spacer(minLength: 0)  //  Not expanding in iOS 15
        
        //  Listing Count…
        
        if let listingCount = self.listingCount
        {
            Text("\(listingCount) listings")
                .font(.custom("Inter", size: 12.0).weight(.medium))
                .foregroundColor(.secondaryText)
                .padding(.vertical, 8)
        }
        
        //  Price…
        
        if let price = self.price
        {
            Text("\(Self.priceFormatter.string(from: price as NSNumber)!)")
                .font(.custom("Inter", size: 14.0).weight(.semibold))
        }
    }
    .padding(12)
}

The columns for the LazyVGrid is Array(repeating: .init(.flexible(), spacing: 20.0), count: 2).

I can’t tell if iOS 14 or 15 has the bug.

Answer 1

I am having exactly the same issue here. A possibility is to work around it, at least if you are using a LazyVGrid or VGrid. This can be done by aligning the grid items to the top.

Array(repeating: .init(.flexible(), spacing: 20.0), count: 2, alignment: .top)

I am aware this will not fully fix the issue, but it will align them at the top, not centered.