如何消除VStack中ScrollView/List与底部面板间的多余间距

核心修改点 #

• 消除VStack默认间距
• 调整List样式与安全区适配，移除多余内边距

修改后的完整代码 #

import SwiftUI

struct TestView: View {
    var body: some View {
        VStack(spacing: 0) {
            List {
                Group {
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                }
                
                Group {
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                }
            }
            .listStyle(.plain)
            .ignoresSafeArea(edges: .bottom)
            // 可选：隐藏List默认背景，和VStack背景统一
            .scrollContentBackground(.hidden)

            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(.gray)
                .ignoresSafeArea()
                .frame(height: 100)
        }
        .background(Color.red)
    }
}

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

各修改说明 #

1. VStack(spacing: 0)：直接移除VStack中子视图（List和底部面板）之间的默认间距，从根源解决空隙问题。
2. .listStyle(.plain)：SwiftUI默认List样式会自带分组内边距，切换为plain样式可消除这些多余的底部留白。
3. .ignoresSafeArea(edges: .bottom)：让List内容延伸至屏幕底部安全区边缘，确保底部面板能完全紧贴List，无空隙。
4. 可选的.scrollContentBackground(.hidden)：如果不需要List的默认白色背景，隐藏后可让VStack的红色背景完整显示，视觉更协调。

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