SwiftUI - Чтобы изменить размер ZStack под размер изображения?

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 и поместить текст в оверлей изображения, например

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))
    })