SwiftUI：如何在全屏Image右上角叠加NavigationLink并确保可见？

你遇到的核心问题是：使用.aspectRatio(contentMode: .fill)的Image会超出父视图边界，导致ZStack被图片撑大，进而让绑定ZStack尺寸的NavigationLink按钮被推到可视区域外。

最简单的修复方案 #

给Image添加.clipped()裁剪超出部分，同时让ZStack占满屏幕，确保NavigationLink的尺寸基于屏幕而非被撑大的图片：

ZStack {
    Image("yose")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .edgesIgnoringSafeArea(.all) // 忽略安全区实现全屏
        .clipped() // 裁剪超出ZStack的图片部分
    
    NavigationLink(destination: OverviewView()) {
        OverviewButton()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
    .padding()
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // 强制ZStack占满屏幕

其他可选方案 #

如果需要更灵活的定位，也可以用GeometryReader直接获取屏幕尺寸来定位按钮：

GeometryReader { proxy in
    ZStack {
        Image("yose")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: proxy.size.width, height: proxy.size.height)
            .clipped()
            .edgesIgnoringSafeArea(.all)
        
        NavigationLink(destination: OverviewView()) {
            OverviewButton()
        }
        .position(x: proxy.size.width - 20, y: 20) // 自定义位置，20为内边距
    }
}

或者用透明占位视图作为按钮的容器，确保容器尺寸和屏幕一致：

ZStack {
    Image("yose")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .edgesIgnoringSafeArea(.all)
    
    // 透明视图占满屏幕，作为按钮的父容器
    Color.clear
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(
            NavigationLink(destination: OverviewView()) {
                OverviewButton()
            },
            alignment: .topTrailing
        )
        .padding()
}

内容的提问来源于stack exchange，提问作者cassenav