使用Navigation Link跳转时背景图片显示过大问题求助

问题出在背景图的布局约束和裁剪设置上，当前代码里的图片未做裁剪，且ignoresSafeArea()的使用导致图片超出视图范围覆盖内容。可以通过以下两种方式修复：

方案一：用ZStack将背景图置于底层 #

把背景图放在ZStack最底部，内容层叠在上方，明确层级关系：

ZStack {
    Image("lake")
        .resizable()
        .scaledToFill()
        .ignoresSafeArea(.container, edges: .all)
        .clipped() // 裁剪超出容器的部分
    
    VStack {
        // 这里放你的内容
    }
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)

方案二：调整VStack的背景设置 #

如果坚持给VStack加背景，需要给图片添加frame约束和裁剪：

VStack {
    // 这里放你的内容
}
.background(
    Image("lake")
        .resizable()
        .scaledToFill()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea(.container, edges: .all)
        .clipped()
)
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)

关键修改点： #

• 添加.clipped()：强制裁剪图片超出父视图的部分，避免内容被遮挡
• 明确ignoresSafeArea的范围：用.container替代全局忽略，适配NavigationView的层级布局
• 设置maxWidth和maxHeight为.infinity：让图片填充可用空间但不溢出

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