swift - 如何在swiftUI中的Foreach循环中显示除一项之外的图像？

问题描述

我创建了一张卡片，我希望在每张卡片的顶部显示一张图片，第一张除外。请帮我解决这个问题。

这是保存图像的结构。

struct XButton: View {
var body: some View {
    Image(systemName: "xmark")
            .font(.system(size: 17,weight: .bold))
            .foregroundColor(.white)
            .padding(.all,10)
            .background(Color.black.opacity(0.6))
            .mask(Circle())
        }
}

这是包含 foreach 循环内卡片的滚动视图

ScrollView{
                    ForEach(CardsData) { item in
                    vstack {
                        
                        CardsView(Cards: item)

                          }
                }
          }

解决方法

您可以在 enumerated() 期间使用 ForEach 获取索引和项。然后，XButton 仅在 index == 0

时有条件地呈现

然后，我使用 ZStack 将 XButton 放在顶部。我假设您原始问题中的“顶部”表示重叠，但如果您只是在 y 轴上表示更高，则可以将其改回 VStack

struct ContentView : View {
    var body: some View {
        ScrollView{
            ForEach(Array(CardsData.enumerated()),id: \.1.id) { (index,item) in
                ZStack {
                    CardsView(Cards: item)
                    if index == 0 {
                        XButton()
                    }
                }
            }
        }
    }
}

注意：这是假设 CardsData 项目符合 Identifiable，如果您原来的 ForEach 工作，我假设他们会这样做。请注意，我从 .1.id 获取 id，它是 id 中项目的 CardsData 属性，它现在是一个元组，其中第一部分 (0) 是索引，而第二个 (1) 是项目。