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)
        }
      }
    }
  }
}

現時点では、これを解決する 2 つの方法を考えることができます。

  1. 配列の順序を逆にします。
  2. 個々のカードの zIndex を変更します。

配列は他のすべての画面ですでに正しい順序になっているため、最初のオプションは悪い考えのように思えます (カードがたくさんある場合は遅くなる可能性があります)。つまり、データをビューに渡そうとしましCardsView(users: userData.reversed())たが、効果がないようです。

2 番目のオプションは、個々のカードの zIndex を変更することです。この例では、すべての User が ID として Int を持っているため、次のように無効にできると思っていましたが、何の効果もありません。

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

User(id: -1,そして、不思議なことに、配列がまったく表示されないように作成されたときに、ID を負に変更すると。誰かがアイデアを持っているか、ここで私が間違っている/間違っていることを知っていますか?

ありがとう:3

4

1 に答える 1