swiftui – big blank white space above scrollview – how to remove it?

February 17, 2023

i have problem with ScrollView. When i place it on my code like below, i have big white space between top view, and bottom scrollview. How to remove it? Can somebody help me?

Here is my code:

import SwiftUI

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()
    }
}


enum ButtonTypes: CaseIterable {
    case about, education, gallery, more, more1, more2
    
    var title: String {
        switch self {
        case .about: return "About"
        case .education: return "Education"
        case .gallery: return "Gallery"
        case .more: return "School"
        case .more1: return "Apps"
        case .more2: return "Calculator"

        }
    }
}
struct ContentView: View {

    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
                NavigationStack{
                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:
                                    FourthView()
                                case .more1:
                                    FourthView()
                                case .more2:
                                    FourthView()


                                }
                            }
                            
                            .frame(height: 50)
                            .frame(minWidth: 100)
                            .foregroundColor(.red)
                            .padding()
                            .background(Color.black)
                            .cornerRadius(5)

                    }
                        
                }
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

when i delete scrollview it is ok, space between is very small. but i want to have like 20 buttons, so it should be scrollable

>Solution :

You can see where the problem lies by adding a .border to your views, e.g.

var body: some View {
    NavigationStack{
        HeaderView()
            .border(.red)
        ScrollView {
            // etc
        }
        .border(.blue)
    }
}

This shows the white space is in the HeaderView: