如何将 SwiftUI 视图覆盖到全屏图像的右上角（topTrailing），并且在设备的视口中仍然可见？

Question

我正在尝试创建一个显示全屏

Image

和右上角覆盖在图像顶部的

NavigationLink

的视图。但是，我遇到了一个问题，当我将

Image

对齐到

NavigationLink

位置时，全屏

NavigationLink

会以某种方式将

.topTrailing

推到屏幕可视部分之外。这是有错误的代码和相应的预览：

ZStack {
   Image("yose").resizable()
        .aspectRatio(contentMode: .fill)
    NavigationLink(destination: OverviewView()) {
        OverviewButton()
    }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing).padding()
}

当我注释掉全屏

Image

时，可以在我想要的位置看到

NavigationLink

。另外，如果我将

NavigationLink

对齐为

.bottom

或

.top

，它也位于屏幕的可视部分内。代码：

ZStack {
//   Image("yose").resizable()
//        .aspectRatio(contentMode: .fill)
    NavigationLink(destination: OverviewView()) {
        OverviewButton()
    }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing).padding()
}

预览：

如何将右上角的

NavigationLink

覆盖在全屏图像之上？

Answer 1

我不确定是什么原因造成的，但使用

GeometryReader

而不是

.infinity

    GeometryReader { g in
        ZStack {
            Color(.red)
                .aspectRatio(contentMode: .fill)
                .frame(width: g.size.width, height: g.size.height)
            NavigationLink(destination: ContentView()) {
                Text("HI")
                    .foregroundStyle(.black)
            }
            .frame(maxWidth: g.size.width, maxHeight: g.size.height, alignment: .topTrailing)
        }
    }