如何让Image在NavigationLink目标视图中占满全屏水平空间？

我用如下代码实现的Image：

Image(img, scale:1.0, orientation:.right, label:self.label).resizable().aspectRatio(contentMode:.fit)

将其作为NavigationLink的目标视图时，无法占据全屏宽度，左右存在边距。但移除NavigationLink单独放置该Image时，它却能占满水平空间，这是怎么回事？如何让它在NavigationLink中占满水平空间？

补充代码结构 #

NavigationView{
  Spacer()
  VStack{
    NavigationLink(
      destination:{
        VStack{
          Button("btn"){}.buttonStyle(.bordered)
          VideoView(img:self.video.img)
        }
      },
      label:{
        HStack{
          Text("view").font(.title)
        }
        .frame(minWidth:300, minHeight:70).foregroundColor(.white).background(.blue).cornerRadius(12)
    })

    NavigationLink(destination:{Text("view")}, label:{
      HStack{
        Text("view").font(.title)
      }
      .frame(minWidth:300, minHeight:70).foregroundColor(.white).background(.blue).cornerRadius(12)
    })
  }  // VStack
  .navigationTitle("title")
  Spacer()
}

struct VideoView:View{
  var img:CGImage?
  let label = Text("video") 

  var body:some View{
    if let img = img{  Image(img, scale:1.0, orientation:.right, label:self.label).resizable().aspectRatio(contentMode:.fit)  }
    else{              Color.blue  }
  }
}

注：VideoView用于渲染来自self.video.img的iPhone相机流CGImage。

NavigationLink的目标视图默认会被系统添加安全区域内边距，同时目标视图的根容器（这里是VStack）默认不会自动填充父视图的全部宽度。当Image单独放置时，它会自动适配父容器的可用空间，但放在NavigationLink的目标VStack中时，VStack默认只包裹子视图内容，再加上系统默认的安全区边距，就导致Image左右出现空白。

针对这个问题，可以通过以下两种方式调整：

方法1：给目标视图的根VStack添加全屏填充 #

修改NavigationLink的destination部分，给VStack添加frame(maxWidth: .infinity)让它占满父视图宽度，同时可选择忽略水平方向的安全区边距：

NavigationLink(
  destination:{
    VStack{
      Button("btn"){}.buttonStyle(.bordered)
      VideoView(img:self.video.img)
    }
    .frame(maxWidth: .infinity) // 让VStack占满水平宽度
    .edgesIgnoringSafeArea(.horizontal) // 忽略水平安全区边距（按需选择）
  },
  label:{
    HStack{
      Text("view").font(.title)
    }
    .frame(minWidth:300, minHeight:70).foregroundColor(.white).background(.blue).cornerRadius(12)
})

方法2：修改VideoView内部的Image布局 #

直接在VideoView的Image上添加frame(maxWidth: .infinity)，确保Image能占满父容器的可用宽度：

struct VideoView:View{
  var img:CGImage?
  let label = Text("video") 

  var body:some View{
    if let img = img{  
      Image(img, scale:1.0, orientation:.right, label:self.label)
        .resizable()
        .aspectRatio(contentMode:.fit)
        .frame(maxWidth: .infinity) // 强制占满水平宽度
        .edgesIgnoringSafeArea(.horizontal) // 按需添加
    }
    else{              
      Color.blue
        .frame(maxWidth: .infinity) // 空白状态也保持全屏
    }
  }
}

额外说明 #

如果不需要忽略安全区（比如想保留顶部状态栏的间距），可以只保留frame(maxWidth: .infinity)，这样Image会在安全区内占满水平空间，不会出现左右边距。

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