I plan to use the entire screen height minus 40 pixels approximately to not overlap with the time, batter and carrier data. However, I noticed that in the code shared below the vstack with pink background is not displayed at the top of the screen. The interesting part is that it's actually occupying an offset at the top of the screen. What's more, when I set an offset greater than 70 pixels, then the pink vstack displays on the view! Thus, I'm looking for an explanation to this swiftui rendering issue.
Offset less than 70 pixels:
Offset greater or equal than 70 pixels:
GeometryReader { proxy in
let offset = 40.0
let height = proxy.size.height - offset
ZStack {
VStack(spacing:0){
VStack{Text("heasdas")}.frame(width: 300,height: offset,alignment: .leading)
.background(.pink)
VStack {
HStack(alignment:.center,spacing:10){
Text("Shapecloud")
.font(.callout)
.fontWeight(.semibold)
.frame(alignment: .leading)
SLine()
}
.frame(maxWidth: .infinity,alignment: .leading)
Text("Digital Twin Solutions\nServices")
.font(.largeTitle)
.fontWeight(.medium)
.frame(maxWidth: .infinity,alignment: .leading)
}
.frame(maxWidth: .infinity,maxHeight: 0.3*height,alignment: .top)
.background(.red)
VStack {
VideoPlayer(player: player)
.frame(maxWidth: .infinity,maxHeight: 300)
}
.frame(maxWidth: .infinity,maxHeight: 0.4*height)
.background(.yellow)
VStack{
Button {
} label: {
Text("Subscribe now").foregroundStyle(.black)
.font(.headline)
.fontWeight(.semibold)
}
.frame(maxWidth: .infinity,maxHeight: 50)
.border(Color.black, width: 2)
Button {
} label: {
Text("Sign In").foregroundStyle(.white)
.font(.headline)
}
.frame(maxWidth: .infinity,maxHeight: 50)
.background(Color.theme.primary)
}
.frame(maxWidth: .infinity,maxHeight: 0.3*height)
.background(.green)
}
.padding(.horizontal, 32)
.background(.cyan)
.ignoresSafeArea(.all)
}
.ignoresSafeArea(.all)
}
.ignoresSafeArea(.all)
