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