SwiftUI中移除矩形间空白的方法（类似邮件App布局）

开发者阿泽

2026-8-1

移除邮件App界面矩形间空白的解决方案

以下是几种针对性的解决方法，你可以根据自己的代码结构选择：

调整容器间距：如果你用VStack/HStack布局矩形，直接将容器的spacing设为0——默认容器会自带间距，这是最常见的留白原因：
```
VStack(spacing: 0) {
    // 你的矩形视图代码
}
```

清除List默认样式的留白：如果是用List展示邮件条目，默认样式会自带内边距和分隔线，需要手动关闭这些设置：

List {
    ForEach(yourMailDataSource) { mail in
        // 你的矩形条目视图
    }
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
    .listRowSeparator(.hidden)
}
.listStyle(.plain)

移除视图自身多余padding：检查每个矩形视图是否添加了不必要的padding，如果有直接删除或者设为0：
```
Rectangle()
    .fill(Color.gray.opacity(0.2))
    .frame(height: 60)
    .padding(0) // 清除冗余padding
```
强制视图填充可用空间：使用frame修饰符让矩形占满父容器的所有可用空间，避免因视图尺寸不足产生留白：
```
Rectangle()
    .fill(Color.gray.opacity(0.2))
    .frame(maxWidth: .infinity, maxHeight: .infinity)
```