SwiftUI中ScrollView与顶部视图间出现大片空白，如何消除？

问题根源在于ScrollView默认的顶部安全区内边距，以及布局容器的适配逻辑冲突，以下是两个直接可行的修复方案：

方案一：移除ScrollView默认内边距并修正布局容器 #

把HeaderView和ScrollView用VStack包裹（取消默认间距），同时移除ScrollView的顶部内边距：

struct ContentView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        NavigationStack{
            VStack(spacing: 0) {
                HeaderView()
                ScrollView {
                    LazyVGrid(columns: columns) {
                        ForEach(ButtonTypes.allCases, id: \.self) { type in
                            NavigationLink(type.title) {
                                switch type {
                                case .about:
                                    AboutView()
                                case .education:
                                    EducationView()
                                case .gallery:
                                    GalleryView()
                                case .more, .more1, .more2:
                                    FourthView()
                                }
                            }
                            .frame(height: 50)
                            .frame(minWidth: 100)
                            .foregroundColor(.red)
                            .padding()
                            .background(Color.black)
                            .cornerRadius(5)
                        }
                    }
                    .padding() // 给网格加内边距，避免按钮贴边
                }
                .contentInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
            }
        }
    }
}

方案二：优化HeaderView的安全区忽略逻辑 #

HeaderView原本的.ignoresSafeArea()会忽略所有方向的安全区，间接干扰ScrollView布局，修改为仅忽略顶部安全区：

struct HeaderView: View {
    var body: some View {
        VStack {
            Image("photo")
                .resizable()
                .scaledToFill()
                .frame(width: 110, height: 110)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.orange, lineWidth: 3))
            Text("Michael Novak")
                .foregroundColor(.white)
                .font(.system(size: 20, weight: .medium, design: .rounded))
            Text("Welcome to my portfolio")
                .foregroundColor(.white)
                .font(.system(size: 18, weight: .medium, design: .rounded))
        }
        .frame(height: 350)
        .frame(maxWidth: .infinity)
        .background(Color.purple)
        .ignoresSafeArea(edges: .top)
    }
}

配合方案一中的VStack和内边距设置，即可彻底消除空白。

额外优化建议 #

• 给LazyVGrid添加.padding()，避免按钮直接贴屏幕边缘，提升视觉体验
• 合并ButtonTypes中重复的分支逻辑，减少代码冗余

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