SwiftUI中实现List紧贴VStack内Form下方的布局问题

要让List紧贴上方的Form，核心是调整组件默认的间距和内边距，以下是修改后的代码及关键说明：

修改后的代码 #

import SwiftUI

struct TestView: View {
    @State var location = ""
    
    var body: some View {
        VStack(spacing: 4) {
            Form {
                Text("Location")
                TextField("Location", text: $location)
                Button("Look up") {
                    // Lookup data
                }
            }
            .listStyle(.plain)
            .padding(.vertical, 0)
            
            List {
                Text("Location One")
                Text("Location Two")
                Text("Location Three")
                Text("Location Four")
                Text("Location Five")
                Text("Location Six")
            }
            .listStyle(.plain)
            .padding(.top, -8)
        }
        .frame(maxWidth: .infinity)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

关键改动说明 #

• VStack(spacing: 4)：缩小VStack默认的组件间距，为表单和列表设置基础的紧凑间距
• Form添加.listStyle(.plain)：移除Form默认分组样式的上下留白，让表单结构更紧凑
• Form添加.padding(.vertical, 0)：清除Form自带的上下内边距，减少不必要的空白
• List添加.listStyle(.plain)：减少List默认的顶部间距，避免列表和表单之间出现过大空隙
• List添加.padding(.top, -8)：通过负padding进一步拉近列表与表单的距离，可根据实际视觉效果微调数值
• VStack添加.frame(maxWidth: .infinity)：强制内容占满屏幕宽度，避免因内容宽度不足导致整体居中显示

iOS16+ 更精准的调整方式 #

如果App适配iOS16及以上版本，可将List的负padding替换为contentInsets，更精准控制列表内边距：

List {
    // ...列表内容
}
.listStyle(.plain)
.contentInsets(.init(top: -8, leading: 0, bottom: 0, trailing: 0))

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