如何反转 SwiftUI ZStack 顺序？

Question

试图在一叠卡片上重新创建一个 next/previous 项目。我的卡片在 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)
        }
      }
    }
  }
}

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

反转数组的顺序。
更改个别卡片上的 zIndex。

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

第二个选项是更改个别卡片上的 zIndex。在这个例子中，每个 User 都有一个 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, 它们根本不可见。有没有人有任何想法或知道我在这里 getting/doing 错了什么？

谢谢:3

Answer 1

import SwiftUI

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{
            ZStack{
                ForEach(Array(values.enumerated()), id:\.offset, content: { (index, value) in
                    Circle()
                        .overlay(Text(value.description).foregroundColor(.white))
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //use the index to find the opposite value
                        .zIndex(Double(values.count - index))
                })
            }
            ZStack{
                ForEach(Array(values.enumerated()), id:\.offset, content: { (index, value) in
                    Circle()
                        .overlay(Text(value.description).foregroundColor(.white))
                        .frame(width: 40)
                        .foregroundColor(colors.randomElement()!)
                    //Just making the index negative should also reverse
                        .zIndex(-Double(index))
                })
            }
            
        }
    }
}

如何反转 SwiftUI ZStack 顺序？

How to reverse SwiftUI ZStack order?

arrays

sorting

swift

swiftui

zstack