如何在Swiftui下实现hstack中的映像设置

Question

我正在尝试对齐HStack中的图像，但是stack下的HStack图像不工作。

代码：-

struct ImageStackRoundUpr: View {
var friendImages = ["DTR-CentrImg.jpeg", "1frame_0_delay-0.07s", "frame_7_delay-0.07s"]
var body: some View {
    HStack(spacing:-6) {
        Group {
            ForEach(friendImages.indices, id: \.self) { i in
                Image(friendImages[i])
                    .resizable()
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(friendImages.count - i))
            }
            
            ForEach(self.friendImages.indices, id: \.self) { i in
                Image(friendImages[i])
                    .resizable()
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(friendImages.count - i))
            }
            
            ForEach(self.friendImages.indices, id: \.self) { i in
                Image(friendImages[i])
                    .resizable()
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(friendImages.count - i))
            }
        }
           Spacer()
       }.padding(.vertical)
   }
}

输出：-

我的目标：-

有人能给我解释一下如何在HStack下显示图像吗？我已经试着用上面的方法实现了，但是还没有结果。

如有任何帮助，将不胜感激。

提前道谢。

Answer 1

使用zIndex您就可以做到这一点

struct ImageStackRoundUpr: View {
    
    var friendImages = ["1", "2", "3", "4", "5"]
    
    var body: some View {
        
        HStack(spacing: -10.0) {

            ForEach(friendImages.indices, id: \.self) { index in
                Image(friendImages[index])
                    .resizable()
                    .scaledToFit()
                    .frame(width: 80, height: 80)
                    .background(Color.gray)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.black, lineWidth: 2))
                    .zIndex(Double(friendImages.count - index))
            }

            Spacer()

        }
        .background(Color.green)
  
    }
}

struct ImageStackRoundUpr: View {
    
    var friendImages = ["1", "2", "3", "4", "5"]
    
    var body: some View {
        
        HStack(spacing: -10.0) {

            ForEach(friendImages.indices, id: \.self) { index in
                Image(friendImages[index])
                    .resizable()
                    .scaledToFit()
                    .frame(width: 50, height: 50)
                    .background(Color.gray)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.black, lineWidth: 1))
                    .zIndex(Double(friendImages.count + friendImages.count - index))
            }
            
            
            ForEach(friendImages.indices, id: \.self) { index in
                Image(friendImages[index])
                    .resizable()
                    .scaledToFit()
                    .frame(width: 50, height: 50)
                    .background(Color.gray)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.black, lineWidth: 1))
                    .zIndex(Double(friendImages.count  - index))
            }

            Spacer()

        }
        .background(Color.green)
  
    }
}