SwiftUI LazyVGrid在iPhone 7仅显1列：如何实现全机型3列布局？

问题根源 #

你在GridMenuElement中设置的.frame(minWidth: UIScreen.main.bounds.width / 4)是导致布局异常的核心原因：在iPhone7这类小屏幕设备上，3个元素的最小宽度加上列间距的总宽度会超过屏幕可用宽度，LazyVGrid会自动调整列数以适配空间，因此只能显示1列。

修改方案 #

1. 移除元素的固定最小宽度限制 #

删掉GridMenuElement中强制设置的最小宽度，让元素宽度由LazyVGrid的GridItem自动分配：

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)
                // 移除该行的minWidth设置
                .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)
                )
    }
}

2. 优化GridItem配置（可选，保障极小屏幕的布局合理性） #

如果希望在所有屏幕上既保持3列，又让元素有合理的最小宽度，可以给GridItem设置minimum参数，替代给元素设置minWidth：

struct GridMenu: View {
    let spacing: CGFloat = 8
    let columnCount = 3
    // 根据需求调整最小列宽
    let minColumnWidth: CGFloat = 100

    var body: some View {
        var columns: [GridItem] {
            return Array(repeating: GridItem(.flexible(minimum: minColumnWidth), spacing: spacing), count: columnCount)
        }
        LazyVGrid(columns: columns, spacing: spacing) {
            ForEach(menuItems, id: \.self) { item in
                GridMenuElement(item: item)
                    .onTapGesture {
                        selectedView = item.view
                    }
            }
        }
        // 可选：添加水平内边距，避免元素贴屏幕边缘
        .padding(.horizontal, spacing)
    }
}

额外提示 #

直接使用UIScreen.main.bounds获取屏幕宽度不符合SwiftUI的布局原则，视图布局应依赖父容器的可用空间而非硬编码屏幕尺寸。上述方案已能解决跨机型的3列一致性问题，无需额外读取屏幕尺寸。

内容的提问来源于stack exchange，提问作者Mert Köksal