SwiftUI中如何增加LazyVGrid内部VStack的内边距？

你的内边距不生效核心是SwiftUI修饰符的执行顺序错误，还有几个适配细节问题：

• 你当前把.padding(15)加在了.background(Color.red)和.cornerRadius(25)之后，这时候padding是加在红色卡片的外部，属于卡片之间的外边距，不会在卡片内容和红色背景之间生成内边距
• 图片写死了150宽度，和flexible布局的GridItem不匹配，会导致卡片宽度和内容宽度不统一，布局混乱
• GridItem的对齐设置和内部VStack的对齐设置冲突，会导致内容偏移

调整修饰符顺序，适配自适应宽度即可，修改后的代码如下：

let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .leading), count: 2)
var body: some View {
    NavigationView {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(data, id:\.self) { item in
                    VStack(alignment: .leading, spacing: 10) {
                        Image("\(item.image)")
                            .resizable()
                            .scaledToFit()
                            .frame(maxWidth: .infinity)
                            .frame(height: 200)
                            .padding(4)
                            .cornerRadius(10)
                        
                        Text(item.name)
                        Text(item.price)
                            
                        HStack(spacing: 15) {
                            Button(action: {}) {
                                HStack {
                                    Image(systemName: "cart")
                                    Text("В Корзину")
                                        .fixedSize(horizontal: true, vertical: false)
                                }
                                .padding(10)
                                .background(Color.blue)
                                .foregroundColor(Color.white)
                                .cornerRadius(10)
                            }
                            Button(action: {}) {
                                Image(systemName: "heart")
                            }
                            .padding(10)
                            .background(Color.white)
                            .foregroundColor(.blue)
                            .cornerRadius(10)
                        }
                    }
                    .foregroundColor(Color.black)
                    .padding(15) // 先加内边距，再设置背景和圆角
                    .background(Color.red)
                    .cornerRadius(25)
                }
            }
            .padding(15) // 整个网格的外围边距
        }
    }
}

• 把.padding(15)移到了.background和.cornerRadius之前，此时padding作用在VStack的内容和背景之间，就是你需要的卡片内边距
• 把图片的固定宽度改为.frame(maxWidth: .infinity)，配合.scaledToFit()自适应卡片宽度，不会出现内容溢出或者宽度不对的问题
• 把GridItem的对齐方式改为.leading，和内部VStack的对齐方式统一，布局更规整
• 删掉了冗余的.clipShape(Rectangle())修饰符，本身背景已经设置了cornerRadius，不需要额外裁剪

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