10

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

enter image description here

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.

Rick
  • 3,298
  • 3
  • 29
  • 47
  • @ElTomato The "A-Train" item on the right is iOS 14, the "A-Train" item on the left is iOS 15. – Rick Oct 05 '21 at 03:14
  • "In iOS 15, it does not, and the cell shrinks, and gets centered in its row" What is IT? And what gets centered? How come the price doesn't appear for A-Train? – El Tomato Oct 05 '21 at 03:24
  • "It" is the spacer between the title and the listing count. The price is optional, and doesn't always appear. My point is that the behavior is different between iOS 14 and 15, and I don't know why or how to fix it. – Rick Oct 05 '21 at 03:26
  • I have the same issue. Any news about the change in iOS 15 ? – Spriter Nov 10 '21 at 17:00
  • I haven’t found a solution other than to fix the cell height. – Rick Nov 10 '21 at 17:04

1 Answers1

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.

Sem
  • 21
  • 5