SwiftUI：水平重叠堆叠元素？

Question

我希望能够横向堆叠重叠的元素，如下所示：

这是我尝试过的方法：

struct StackedElementsView: View {
    let colors: [Color] = [.red, .blue, .purple]
    
    var body: some View {
        HStack {
            ZStack {
                ForEach(0..<colors.count) { i in
                    ZStack(alignment: .leading) {
                        colors[i]
                            .clipShape(Circle())
                            .frame(width: 44, height: 44)
                    }
                    .offset(x: CGFloat(i) * 25)
                }
            }
            .padding(.leading, 24)
            Color.purple
                .frame(width: 100, height: 44)
            Spacer()
        }
        .padding(.vertical, 8)
    }
}

struct StackedElementsView_Previews: PreviewProvider {
    static var previews: some View {
        StackedElementsView()
    }
}

我有一个问题，紫色矩形重叠在圆圈上面，我不知道为什么。

谢谢你的帮助。

- Another Dude

Answer 1

这里有一个更加直观的解决方案。你可以使用负间距并只使用HStack：

struct StackedElementsView: View {
    let colors: [Color] = [.red, .blue, .purple]
    
    var body: some View {
        HStack {
            HStack(spacing: -25) {
                ForEach(0..<colors.count) { i in
                    colors[i]
                        .clipShape(Circle())
                        .frame(width: 44, height: 44)
                }
            }
            
            Color.purple
                .frame(width: 100, height: 44)
            Spacer()
        }
        .padding(.leading, 24)
        .padding(.vertical, 8)
    }
}

- Mofawaw

---

你不需要使用-19的间距吗？0的间距将会以宽度44偏移圆圈，因此为了达到25的效果，你需要减去19。 - vacawama

谢谢你的回答。我选择了 vacawama 的解决方案，但是你的解决方案也可以运行。 - Another Dude

有没有一种方法可以反转hstack元素的排列顺序？比如红色圆圈在顶部，下面是蓝色，然后是紫色。 - chakkala

Answer 2

.offset 只改变视图绘制的位置，但不改变框架，这就是为什么矩形绘制比预期向左更远的原因。

解决此问题的一种方法是向矩形添加适当的前导填充：

Color.purple
    .frame(width: 100, height: 44)
    .padding(.leading, CGFloat(colors.count - 1) * 25)

---

替代方案

不要使用.offset，而是在HStack中使用一个Color.clear视图来提供所需的间距：

ForEach(0..<colors.count) { i in
    ZStack(alignment: .leading) {
        HStack(spacing: 0) {
            Color.clear
                .frame(width: CGFloat(i) * 25, height: 44)
            colors[i]
                .clipShape(Circle())
                .frame(width: 44, height: 44)
        }
    }
}

- vacawama

---

谢谢！另一种方法很完美。 - Another Dude