SwiftUI中如何缩小List视图里VStack与Section的间距？

你遇到的问题源于直接在List中放置的VStack会被识别为独立列表行，系统默认给列表行与Section之间保留了固定间距，单独设置listRowInsets无法消除这个间距。以下是几种可行的解决方法：

方法1：将VStack包裹在无标题Section中 #

把顶部VStack放入无标题Section，让两个Section的间距更易控制：

List {
    Section {
        VStack(alignment: .leading, spacing: 8) {
            // 你的内容
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .listRowBackground(Color.clear)
    }
    .listSectionSeparator(.hidden) // 可选：隐藏Section分隔线
    .listSectionSpacing(0) // 控制Section间距（iOS 16+）

    Section("History") {
        // 你的历史内容
    }
}

方法2：设置List整体行间距 #

用listRowSpacing直接统一List内元素的间距：

List {
    VStack(alignment: .leading, spacing: 8) {
        // 你的内容
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .listRowBackground(Color.clear)

    Section("History") {
        // 你的历史内容
    }
}
.listRowSpacing(0) // 生效于iOS 14+

方法3：自定义Section头部内边距（兼容iOS 15及以下） #

如果需要适配旧版本系统，可手动调整Section头部的内边距：

List {
    VStack(alignment: .leading, spacing: 8) {
        // 你的内容
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .listRowBackground(Color.clear)
    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))

    Section {
        // 你的历史内容
    } header: {
        Text("History")
            .padding(.top, -8) // 手动缩小顶部间距
    }
}

补充说明 #

• listSectionSpacing是iOS 16新增API，能直接控制Section间距，是最简洁的方案
• 切换List样式为PlainListStyle()也能减少默认间距：

List {
    // 内容
}
.listStyle(PlainListStyle())

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