SwiftUI LazyVGrid with 3 columns rendered as grid with 1 column on iPhone 7

75 views Asked by At
struct GridMenu: View {
  let spacing: CGFloat = 8
    let columnCount = 3
    var body: some View {
        var columns: [GridItem] {
            return Array(repeating: GridItem(.flexible(), spacing: spacing), count: columnCount)
        }
     LazyVGrid(columns: columns, spacing: spacing) {
                    ForEach(menuItems, id: \.self) { item in
                        GridMenuElement(item: item)
                            .onTapGesture {
                                selectedView = item.view
                            }
                    }
                }

For some reason, this shows 3 perfectly gapped columns in iPhone 11 and newer models but in iPhone 7 it shows one full-screen width column. How can I make it 3 columns in all models?

struct GridMenuElement: View {
    let item: MenuItemModel

    var body: some View {
        RoundedRectangle(cornerRadius: 8)
                .foregroundColor(.white)
                .shadow(color: Color.black.opacity(0.08), radius: 8, x: 0, y: 0)
                .frame(minWidth: UIScreen.main.bounds.width / 4)
                .frame(height: 100)
                .overlay(
                    HStack{
                        VStack(alignment: .leading) {
                            RoundedRectangle(cornerRadius: 12)
                                .foregroundColor(.lightPurple50)
                                .frame(width: 32, height: 32)
                                .overlay(
                                    Image(item.iconName)
                                        .frame(width: 20, height: 20)
                                )
                            Text(item.title)
                                .font(.subtext6)
                                .foregroundColor(.solidDarkPurple)
                                .padding(.top,32)
                        }
                        Spacer()
                    }
                    .padding(.leading,8)
                )
    }
}
0

There are 0 answers