Question

我将图片和文字包裹在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))
    })

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

1 个答案: