I'm trying to create a view that presents a full screen Image
and a NavigationLink
in the top right corner overlayed on top of the image. However, I'm running into an issue such that the full screen Image
somehow pushes the NavigationLink
outside of the viewable part of the screen when I align the NavigationLink
to the .topTrailing
position. Here is the buggy code and the corresponding preview:
ZStack {
Image("yose").resizable()
.aspectRatio(contentMode: .fill)
NavigationLink(destination: OverviewView()) {
OverviewButton()
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing).padding()
}
When I comment out the full screen Image
, the NavigationLink
can be seen where I would like it to be. Also, if I align the NavigationLink
to be .bottom
or .top
, it is within the viewable part of the screen as well. Code:
ZStack {
// Image("yose").resizable()
// .aspectRatio(contentMode: .fill)
NavigationLink(destination: OverviewView()) {
OverviewButton()
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing).padding()
}
Preview:
How can I overlay the NavigationLink
in the top right corner on top of the full screen image?
I'm not sure what's causing this, but using a
GeometryReader
instead of.infinity
seems to fix the problem.