如何在 Swiftui 下的 hstack 中进行映像设置

Question

我遵循了@swiftPunk 的回答，它工作正常。但在最后一点，我坚持我的第一张图片没有正确显示。请查看随附的屏幕截图。

更新代码：-

struct ImageStackRoundUpr: View {
var friendRiders = ["DTR-CentrImg.jpeg", "1frame_0_delay-0.07s", "frame_7_delay-0.07s"]
var nonFriendRiders = ["DTR-CentrImg.jpeg", "1frame_0_delay-0.07s", "frame_7_delay-0.07s"]
var body: some View {
    HStack(spacing:-10) {
        Group {
            ZStack {
                Image("DTR-CentrImg.jpeg")
                     .renderingMode(.original)
                    .resizable()
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                ZStack {
                    Image("Crown")
                        .renderingMode(.original)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 23, height: 23)
                        .shadow(radius: 1)
                }
                .offset(x: 0, y: -25)
                .rotationEffect(.degrees(12))
            }
            
            ForEach(self.friendRiders.indices, id: \.self) { rider in
                Image(friendRiders[rider])
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(friendRiders.count + nonFriendRiders.count - rider) )
            }
            
            ForEach(self.nonFriendRiders.indices, id: \.self) { rider in
                Image(nonFriendRiders[rider])
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(nonFriendRiders.count - rider))
            }
        }
        Spacer()
    }.padding(.vertical)
    }
 }

输出：-

我的目标：-

谁能告诉我如何在HStack中显示下面的图像，我已经尝试通过上面实现但还没有结果。

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

提前致谢。

Answer 1

尝试以下操作：

struct ContentView: View {
    var friendImages: [Color] = [Color.red, Color.green, Color.blue]
    var body: some View {
        HStack(spacing:-6) {
            Group {
                ForEach(friendImages, id: \.self) { imgeName in
                    imgeName
                        .frame(width: 40, height: 40)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                        .zIndex(Double(friendImages.count) - Double(friendImages.firstIndex(of: imgeName) ?? 0))
                }
            }
            Spacer()
        }.padding(.vertical)
    }
}

所以这里的关键是.zIndex(...)修饰符。您可以在文档中阅读更多相关信息：https://developer.apple.com/documentation/swiftui/view/zindex(_:)

编辑：
回答更新后的问题：我不会使用三个不同的 ForEach 循环。相反，我会简单地调整我的数组：

struct ContentView: View {
    var friendImages: [Color] = [Color.red, Color.green, Color.blue].repeated(count: 3)
    var body: some View {
        HStack(spacing: -6) {
            Group {
                ForEach(friendImages.indices, id: \.self) { i in
                    friendImages[i]
                        .frame(width: 40, height: 40)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                        .zIndex(Double(friendImages.count - i))
                }
            }
            Spacer()
        }.padding(.vertical)
    }
}

extension Array {
  init(repeating: [Element], count: Int) {
    self.init([[Element]](repeating: repeating, count: count).flatMap{[=11=]})
  }

  func repeated(count: Int) -> [Element] {
    return [Element](repeating: self, count: count)
  }
}

参考这个问题：

Answer 2

可能的解决方案（因为它们都在一个容器中）是使用 zIndex 让它们以相反的顺序绘制，例如

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

Answer 3

有了 zIndex，你就可以做到

版本 1.0.0

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

版本 2.0.0

最终你会寻找这个

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        zIndexHierarchyView()
        
    }
}

struct zIndexHierarchyView: View {

    let imageArray: [String] = ["1", "2", "3", "4", "5"]
    
    var body: some View {
        
        ScrollView(.horizontal, showsIndicators: false) {
            
            HStack(spacing: -30.0) {
                
                ForEach(imageArray.indices, id: \.self) { index in
                    
                    Image(imageArray[index])
                        .resizable()
                        .scaledToFit()
                        .frame(width: 150, height: 150)
                        .background(Color.gray)
                        .clipShape(Circle())
                        .overlay(Circle().strokeBorder(Color.black, lineWidth: 3))
                        .zIndex(Double(imageArray.count + imageArray.count - index))  // <<: Here!
                        .shadow(radius: 10)
                    
                }
                
                ForEach(imageArray.indices, id: \.self) { index in
                    
                    Image(imageArray[index])
                        .resizable()
                        .scaledToFit()
                        .frame(width: 150, height: 150)
                        .background(Color.gray)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.black, lineWidth: 3))
                        .zIndex(Double(imageArray.count - index))                    // <<: Here!
                        .shadow(radius: 10)
                    
                }
                
            }
            .padding(10)
            .background(Color.green)
            .cornerRadius(10)
            
        }
        .shadow(radius: 10)
        .statusBar(hidden: true)
        
    }
}

版本 2.0.1

关于更新：此更新是根据 OP 的要求进行的，以解决新问题！

struct ImageStackRoundUpr: View {
    
    var friendRiders = ["1", "2", "3", "4", "5"]
    var nonFriendRiders = ["1", "2", "3", "4", "5"]
    
    var body: some View {
        
        HStack(spacing: -10) {
            
            Image("1")
                .renderingMode(.original)
                .resizable()
                .frame(width: 40, height: 40)
                .background(Color.gray)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.black, lineWidth: 1))
                .zIndex(Double(friendRiders.count + nonFriendRiders.count + 1))
                .overlay(Image("Crown")
                            .renderingMode(.original)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 23, height: 23)
                            .shadow(radius: 1)
                            .offset(x: 0, y: -25)
                            .rotationEffect(.degrees(12)))
            
            ForEach(self.friendRiders.indices, id: \.self) { rider in
                
                Image(friendRiders[rider])
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .background(Color.gray)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.black, lineWidth: 1))
                    .zIndex(Double(friendRiders.count + nonFriendRiders.count - rider))
                
            }
            
            ForEach(self.nonFriendRiders.indices, id: \.self) { rider in
                
                Image(nonFriendRiders[rider])
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .background(Color.gray)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.black, lineWidth: 1))
                    .zIndex(Double(nonFriendRiders.count - rider))
            }
            
            
            Spacer()
            
        }
        .padding(.vertical)

    }
}

如何在 Swiftui 下的 hstack 中进行映像设置

How to image setup in hstack under Swiftui

image

ios

swift

swiftui

hstack

版本 1.0.0

版本 2.0.0

版本 2.0.1