SwiftUI如何设置HStack内的图片堆叠？首张图显示异常求解

当前实现的异常表现 #

按参考方案完成开发后，组件运行存在两个和预期不符的问题：

• 首位带皇冠标识的主头像显示异常，被后续列表元素大面积遮挡
• 负间距配置下的层叠顺序完全错乱，和目标视觉效果偏差较大

实际运行效果：

预期实现效果：

核心问题定位 #

逐行核对代码逻辑和SwiftUI的渲染规则，可直接定位两个根因：

• zIndex层级逻辑完全颠倒
  SwiftUI的zIndex遵循数值越大，视图渲染层级越靠上的规则，原代码中列表元素的层级计算采用总元素数 - 当前索引的逻辑，会让数组最末尾的元素处于最低层级、最靠近主头像的元素处于高层，但实际渲染时，整个列表的整体层级被压到了主头像的下方，直接把最左侧的主头像盖住——这就是所谓“首张图片无法正常显示”的本质，不是图片加载失败，是渲染层级被后续元素覆盖了。
• 重复素材叠加放大了异常
  原代码的好友、非好友列表数组的第一个元素就和主头像的素材完全重名，相当于在主头像右侧10pt的位置又放了一个和主头像一模一样的图，叠在主头像的边缘位置，进一步加重了遮挡感。

修复后可直接复用的代码 #

struct ImageStackRoundUpr: View {
    // 移除列表中重复的主头像素材，避免无效叠加
    var friendRiders = ["1frame_0_delay-0.07s", "frame_7_delay-0.07s"]
    var nonFriendRiders = ["1frame_0_delay-0.07s", "frame_7_delay-0.07s"]
    
    var body: some View {
        HStack(spacing: -10) {
            // 带皇冠的主头像模块
            ZStack {
                Image("DTR-CentrImg.jpeg")
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                
                Image("Crown")
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 23, height: 23)
                    .shadow(radius: 1)
                    .offset(x: 0, y: -25)
                    .rotationEffect(.degrees(12))
            }
            // 给主头像设置远高于其他元素的层级，保证不被遮挡
            .zIndex(100)
            
            // 好友头像列表
            ForEach(Array(friendRiders.enumerated()), id: \.offset) { index, imageName in
                Image(imageName)
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    // 越靠近主头像的元素层级越高，形成依次右叠的效果
                    .zIndex(Double(friendRiders.count - index))
            }
            
            // 非好友头像列表
            ForEach(Array(nonFriendRiders.enumerated()), id: \.offset) { index, imageName in
                Image(imageName)
                    .renderingMode(.original)
                    .resizable()
                    .frame(width: 34, height: 34)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.gray, lineWidth: 1))
                    .zIndex(Double(nonFriendRiders.count - index))
            }
        }
        .padding(.vertical)
    }
}

调整说明 #

• 单独给主头像设置高优先级渲染层级，从机制上避免被后续头像遮挡，皇冠和头像本体可以完整显示
• 清理了列表数组中重复的主头像素材，消除无效的叠加遮挡
• 把原代码中直接用数组索引作为ForEach ID的写法改成枚举遍历形式，避免后续集合动态更新时出现渲染异常
• 保持“越靠左的头像层级越高”的层级规则，配合-10的负间距，就能实现后一个头像依次叠在前一个头像右边缘的层叠效果，和目标视觉样式对齐

内容的提问来源于stack exchange，提问作者Sham Dhiman