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:
[
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.