I'm learning SwiftUI (with Swift 5, targeting iOS 13.2)
Q) How do I get it so that my photo (and contents underneath) are aligned behind the notch area?
What I've got so far in the simulator:
As you can see, I've found out how to use an inline navigation bar style.
What I want
View Code:
import SwiftUI
struct DrinkDetail: View {
var drink: Drink
var body: some View {
List {
ZStack(alignment: .bottom) {
Image(drink.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
Rectangle()
.frame(height: 80.0)
.opacity(0.75)
.blur(radius: 10)
HStack {
Text(drink.name)
.font(.largeTitle)
.foregroundColor(.white)
.padding(8)
Spacer()
}
}
.listRowInsets(EdgeInsets())
Text(drink.description)
.font(.body)
.foregroundColor(.primary)
.lineLimit(nil)
.padding(.bottom, 50.0)
.lineSpacing(12)
HStack {
Spacer()
Button(action: {}) {
Text("Order me")
}
.frame(width: 200.0, height: 50.0)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Spacer()
}
}
.edgesIgnoringSafeArea(.top)
.navigationBarTitle(Text(""), displayMode: .inline)
}
}