0

试图在一堆卡片上重新创建下一个/上一个项目。我的卡片在 ZStack 中。我遇到的问题是默认情况下 ZStack 是相反的顺序（数组中的第一项位于堆栈的底部）。

以下是代码目前的样子：

数据

var userData: [User] = [
    User(id: 0, firstName: "Cindy", lastName: "Jones", age: 23, mutualFriends: 4, imageName: "image1", occupation: "Coach"),
    User(id: 1, firstName: "Mark", lastName: "Bennett", age: 27, mutualFriends: 0, imageName: "image2", occupation: "Insurance Agent"),
    User(id: 2, firstName: "Clayton", lastName: "Delaney", age: 20, mutualFriends: 1, imageName: "image23, occupation: "Food Scientist"),
]

内容视图（数据传入的地方）

CardsView(users: userData).tab(title: "Tinder Cards", image: "music.note")

卡堆

struct CardStack: View {
  @State var users: [User]

  var body: some View {
    ZStack {
      ForEach(self.users, id: \.self) { user in
        if user.id > self.maxID - 4 { //only show 4 at a time
          CardView(user: user)
        }
      }
    }
  }
}

目前，我可以想到两种方法来解决这个问题：

  1. 反转数组的顺序。
  2. 更改单个卡片上的 zIndex。

因为对于所有其他屏幕，数组的顺序已经正确，所以第一个选项似乎是个坏主意（如果有很多卡片，可能会很慢）。也就是说，我尝试将数据传递到视图中CardsView(users: userData.reversed())，但似乎没有效果。

第二个选项是更改单个卡片上的 zIndex。在这个例子中，每个用户都有一个 Int 作为 ID，所以我想我可以像这样否定它，但它没有任何效果：

ZStack {
  ForEach(self.users, id: \.self) { user in
    if user.id > self.maxID - 4 {
      CardView(user: user)
        .zIndex(Double(user.id) * -1)
    }
  }
}

而且，奇怪的是，如果我在创建数组时将 id 更改为负数，就像 User(id: -1,它们根本不可见一样。有没有人有任何想法或知道我在这里得到/做错了什么？

谢谢：3

4

1 回答 1

0 
struct ReverseZView: View {
    let values: [Int] = [0,1,2,3,4,5,6,7,8,9]
    let colors: [Color] = [.red,.yellow,.orange,.green,.blue,.gray,.black]
    var body: some View {
        VStack{
            HStack(spacing: -20){
                //Maintains the object for things like Binfing
                ForEach(values, id:\.self, content: { value in
                    //find the index
                    let idx = values.firstIndex(where: {
                        $0 == value
                    }) ?? 0
                    
                    Circle()
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //use the index to find the opposite value
                        .zIndex(Double(values.count - idx))
                })
            }
            //less safe per apple but the index directly can be used
            HStack(spacing: -20){
                ForEach(values.indices, id:\.self, content: { n in
                    Circle()
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //use the index to find the opposite value
                        .zIndex(Double(values.count - n))
                })
            }
            HStack(spacing: -20){
                ForEach(values.indices, id:\.self, content: { n in
                    Circle()
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //Just making the index negative should also reverse
                        .zIndex(-Double(n))
                    
                })
            }
            //All of the solutions work with a ZStack
            ZStack{
                ForEach(values.indices, id:\.self, content: { n in
                    Circle()
                        .overlay(Text(n.description).foregroundColor(.white))
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //Just making the index negative should also reverse
                        .zIndex(-Double(n))
                    
                })
            }
            
        }
    }
}
于 2021-09-25T17:19:51.247 回答