swift - SwiftUI - 将 ZStack 调整为图像大小？

Question

我有一张用 a 包裹的图片和文字ZStack，我希望它ZStack是图片的形状，但是当我将背景设置为一种颜色时，图片的每一侧都会出现两条条纹。
我的代码：

ZStack {
    Image(schema.image)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .border(Color.white)
        .shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5) ,radius: 10)
    
    ForEach(schema.item) { item in
        Text(String(item.id))
            .font(.headline)
            .foregroundColor(Color.black)
            .padding(5)
            .overlay(
                Circle().stroke(Color.black, lineWidth: 1)
        )
            .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
    }
}.background(Color.yellow.opacity(0.5))

你知道如何修剪ZStack到图像的大小吗？

Answer 1

ZStack紧贴图像框架，但由于图像的方面不是 1，因此图像本身（在某些方面）比自己的框架少。

使用.fill方式

   ZStack {
        Image(schema.image)
            .resizable()
            .aspectRatio(contentMode: .fill)   // << here !!

替代方法是完全删除 ZStack，并将 Text 放入图像的叠加层中，例如

Image(schema.image)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .border(Color.white)
    .shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5) ,radius: 10)
    .overlay(

      ForEach(schema.item) { item in
        Text(String(item.id))
            .font(.headline)
            .foregroundColor(Color.black)
            .padding(5)
            .overlay(
                Circle().stroke(Color.black, lineWidth: 1)
            )
            .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
    })