SwiftUI: Issue while trying to implement a scrollview

Question

I am developing an app on SwiftUI. Everything works fine until I try to wrap my code inside a scrollview. The problem is that my first image inside ZStack automatically leaves some space at the top after it's nested inside a scrollview.

Before scrollview: [

After scrollview:

Here is my code:

import SwiftUI

struct SelectedSalonPage: View {
    var body: some View {
        ScrollView {
            VStack{
                ZStack{
                    Image("salongdrömaura")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .edgesIgnoringSafeArea([.top])
                    
                    HStack{
                        
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "chevron.left")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                            .padding()
                        Spacer()
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "square.and.arrow.up")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "heart")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                            .padding()
                        
                    }
                    
                }
                
                
                VStack{
                    ZStack{
                        Rectangle()
                            .foregroundColor(.white)
                        VStack {
                            
                            HStack{
                                Text("Salong Dröm Aura")
                                    .font(.title)
                                    .fontWeight(.semibold)
                                Circle()
                                    .fill(Color.purple.opacity(0.8))
                                    .frame(width: 55)
                                    .overlay(
                                        Image("instalogo")
                                            .resizable()
                                            .scaledToFit()
                                            .frame(width: 25)
                                    )
                                
                            }
                            VStack(alignment: .leading){
                                HStack{
                                    Image("placemark")
                                    Text("Huvudstagatan 12 - Solna")
                                        .fontWeight(.medium)
                                    
                                }
                                
                                HStack{
                                    Image(systemName: "star.fill")
                                    Text("Läs recensioner (6)")
                                        .fontWeight(.medium)
                                    
                                }
                                
                                HStack{
                                    Text("💵")
                                    Text("Snittpris: 370 kr")
                                        .fontWeight(.medium)
                                    
                                }
                                HStack{
                                    Circle()
                                        .stroke(lineWidth: 7)
                                        .foregroundColor(.purple)
                                        .rotationEffect(Angle(degrees: 270))
                                        .frame(width: 50)
                                        .overlay(
                                            Text("10")
                                                .foregroundColor(.purple)
                                                .fontWeight(.bold)
                                                .font(.title2)
                                        )
                                    Text("Snurra hjulet!!")
                                        .fontWeight(.semibold)
                                    Image(systemName: "chevron.right")
                                }
                            }
                            
                        }
                        
                    }
                    
                    
                    ZStack{
                        Rectangle()
                            .foregroundColor(.white)
                            .frame(height: 170)
                        
                        VStack(alignment: .leading){
                            HStack{
                                Image("SweBarberMini")
                                    .resizable()
                                    .padding(.leading)
                                    .frame(width: 60, height: 40)
                                Text("Köp ett presentkort med värde av:")
                                    .fontWeight(.bold)
                            }
                            
                            ScrollView(.horizontal) {
                                HStack(spacing: 15){
                                    TimeBookingRectangle()
                                        .padding(.leading)
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                        .padding(.trailing)
                                }
                            }
                            
                        }
                        
                        
                    }
                    
                }
                
                
            } .background(Color(red: 0.88, green: 0.88, blue: 0.88))
        }
    }
}

I have tried different things to see what causes this problem, for example removing edgesignoringsafeare, removing my VStack, placing my scrollView inside my VStack and so on.

Answer 1

The modifier .edgesIgnoringSafeArea is deprecated, so I would suggest replacing with .ignoresSafeArea instead.

Then, try adding it to the ScrollView too:

var body: some View {
    ScrollView {
        // content as before
    }
    .ignoresSafeArea(edges: .top) // <- HERE
}

However, when you try this, you will find that the symbols in gray circles are no longer visible because they disappear off the top of the screen. To fix this:

• nest the ScrollView in a GeometryReader
• add alignment: .top to the first ZStack
• remove the negative top padding from the circles
• add top padding to the HStack to match the safe area insets at the top (you can get this from the GeometryReader)
• you may also want to change the .padding() around the circles to .padding(.horizontal).

Like this:

var body: some View {
    GeometryReader { proxy in // <- added
        ScrollView {
            VStack{
                ZStack(alignment: .top) { // <- alignment added
                    Image("salongdrömaura")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .ignoresSafeArea(edges: .top)

                    HStack{

                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "chevron.left")
                                    .foregroundColor(.white)
                            )
                            // .padding(.top, -150)
                            .padding(.horizontal) // instead of .padding()

                        // etc.
                    }
                    .padding(.top, proxy.safeAreaInsets.top) // <- added
                }

                VStack{
                    // other content as before
                }
            }
            .background(Color(red: 0.88, green: 0.88, blue: 0.88))
        }
        .ignoresSafeArea(edges: .top)
    }
}