I want the background image and the green UI element to be at the top of the screen, but with the code below the green UI elements in the middle.
code:
struct AppointmentStep1: View {
@Environment(.dismiss) var dismiss
var body: some View {
ZStack {
// Background image
Image("home_bg")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
VStack {
HStack {
Button {
dismiss()
} label: {
Image(systemName: "arrow.left")
.font(.system(size: 25))
.tint(.white)
.padding(.trailing, 6)
}
Text("Appointment")
.font(.calibriRegular(with: 20))
.foregroundStyle(.white)
Spacer()
}
.padding(16)
}
.background(
Color.appGreen2
.ignoresSafeArea()
)
Spacer()
}
}
}
o/p: how to move the green view to top
EDIT:
2
You can simply set alignment for ZStack, it’s .center by default:
ZStack(alignment: .top) {
...
}
2
To achieve the result I presume you expect, first of all you need to move Spacer from ZStack to VStack. Here’s the edited code snippet for your reference:
var body: some View {
ZStack {
Image("home_bg")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
VStack {
HStack {
Button { dismiss() } label: {
Image(systemName: "arrow.left")
.font(.system(size: 25.0))
.tint(.white)
.padding(.trailing, 6.0)
}
Text("Appointment")
.font(.calibriRegular(with: 20))
.foregroundStyle(.white)
Spacer()
}
.padding(.vertical, 16.0)
.padding(.horizontal, 32.0)
.background(
Color
.appGreen2
.ignoresSafeArea()
)
Spacer()
}
}
}
Here’s the result:
(On the screenshot you see another background image and another green colour, because I obviously don’t have your non-standard assets.)
I also played with the paddings of Button to fix them a bit—perhaps this is another thing you want to fix.