ios – SwiftUI: Issue while trying to implement a scrollview


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:
[before scrollview(https://i.stack.imgur.com/xjcQ9.png)

After scrollview:
when scrollview is added

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.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img