添加 LazyVGrid 后预览崩溃

Question

我正在学习斯坦福 CS193p，一切都很顺利，直到用 HStack 切换 LazyVGrid。

我与一位教授检查了我的代码，它们是相同的。但是我的代码中令人困惑的部分是，当我的 emojiCount = 4，预览效果很好时，我可以使用 LazyVGrid，但是当我将 emojiCount 值更改为超过 4 时，例如 5 或 24，它会立即崩溃。

崩溃信息是这样的：

Diagnostics

这是我的代码：

import SwiftUI

struct ContentView: View {
    var emojis = ["????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????", "????"]
   @State var emojiCount = 4
    
    var body: some View {
        VStack {
            LazyVGrid(columns:[GridItem(),GridItem(),GridItem()]) {
                ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                    CardView(content: emoji)
                }
            }
            .foregroundColor(.red)
            Spacer()
            HStack {
                remove
                Spacer()
                add
            }
            .font(.largeTitle)
            .padding(.horizontal)
        }
        .padding(.horizontal)
    }
    
    var remove: some View {
        Button {
            if emojiCount > 2 {
                emojiCount -= 1
            }
        } label: {
            Image(systemName:"minus.circle")
            }
    }
    
    var add: some View {
        Button {
            if emojiCount < emojis.count {
                emojiCount += 1
            }
        } label: {
            Image(systemName:"plus.circle")
            }
    }
}


struct CardView: View {
    var content: String
    @State var isFaceUp: Bool = true
    
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20)
            if isFaceUp {
                shape.fill().foregroundColor(.white)
                shape.stroke(lineWidth: 3)
                Text(content).font(.largeTitle)
            } else {
                shape.fill()
            }
        }
        .onTapGesture {
            isFaceUp = !isFaceUp
        }
    }
}

我试图弄清楚整个晚上，但我仍然不知道我的代码有什么问题。非常感谢！

Answer 1

在模拟器中运行代码，你会看到错误

致命错误：每个布局项只能出现一次

这导致了表情符号。你有很多，但只有 4 种不同的类型。 在\.self 引用项目的循环中，您有责任确保项目是唯一的。