SwiftUI中实现卡片视图垂直两列布局问题求助

你的问题出在使用HStack循环渲染卡片——HStack是单行横向容器，不会自动换行，所以所有卡片都挤在一行里。要实现两列垂直布局，SwiftUI推荐用LazyVGrid来做网格布局，下面是具体修改方案：

步骤1：定义网格列配置 #

在主视图中添加两列的网格配置，让两列平分可用宽度，同时可以自定义列间距：

// 放在主视图结构体内部
let columns: [GridItem] = [
    GridItem(.flexible(), spacing: 16),
    GridItem(.flexible(), spacing: 16)
]

步骤2：替换HStack为LazyVGrid #

把原来包裹ForEach的HStack替换成LazyVGrid，传入定义好的列配置，同时添加内边距优化布局：

var body: some View {
    VStack {
        HeaderView()
        // 用LazyVGrid替代HStack
        LazyVGrid(columns: columns, spacing: 16) {
            ForEach(viewModel.products, id: \.productCode) { cat in
                CardView(type: .mediumProductCardView(viewModel: ProductCatalogViewModel(product: cat)))
            }
        }
        .padding(.horizontal) // 避免卡片贴屏幕边缘
    }
}

步骤3：优化CardView的自适应布局（可选） #

原来的CardView设置了固定宽高176，如果想让卡片适配不同屏幕宽度，可以调整frame属性，让宽度自适应网格列：

// 修改CardView中的frame设置
.frame(minHeight: 176) // 只保留最小高度，宽度自动适配列宽

为什么原来的写法失效？ #

HStack是单行横向布局容器，它会强制所有子视图在同一行显示，超出屏幕后要么横向滚动要么挤压视图，无法自动换行。而LazyVGrid是SwiftUI专门为网格布局设计的组件，会根据你定义的列数自动将子视图排列成多行，垂直方向滚动，完全匹配你需要的两列垂直布局效果。

内容的提问来源于stack exchange，提问作者IOS Tech