SwiftUI如果列表视图中的项目过多，为什么列表视图中的按钮会停止工作？

Question

帮助！我无法弄清楚！

为了帮助我学习SwiftUI，我正在使用列表视图制作一个简单的杂货列表应用。点击列表中的每个项目时，都有一些按钮会变为绿色或红色。

下面的代码非常有用，直到我在列表数组中添加了太多项目。如果列表长于屏幕尺寸，并且您必须滚动，那么奇怪的事情就会开始发生。 （例如按钮不会变成绿色，或者下一页上的项目变成绿色）

我使用不同的模拟器进行了测试，并且在iPhone SE上，在混乱之前，我可以从列表中获得14个项目。在iPhone 11 Pro Max上，我可以从列表中获得22项内容，然后再将其弄乱。它与屏幕尺寸的长度以及是否需要滚动有关。

这里是代码：

    import SwiftUI

    struct CheckboxFieldView : View {
        @State var checkState:Bool = false ;
        var body: some View {
             Button(action:
                {
                    self.checkState = !self.checkState
            }) {
                       Rectangle()
                                .fill(self.checkState ? Color.green : Color.red)
                                .frame(width:20, height:20, alignment: .center)
                                .cornerRadius(5)
            }
            .foregroundColor(Color.white)
        }
    }

    struct ContentView: View {
    //    let items = (1...100).map { number in "Item \(number)" }

    let items = ["Bread", "Milk", "Cheese", "Granola", "Nuts", "Cereal", "Rosemary", "Tomato Sauce", "Bean with Bacon Soup", "Tea", "Chocolate Milk", "Frozen Blueberries", "Frozen Mixed Berries", "Frozen Strawberries", "Grapes"]

        var body: some View {
            NavigationView {
                List(items, id: \.self) { item in
                    HStack{
                        CheckboxFieldView()
                        Text(item)
                        self.padding()
                        Text ("Location")
                    }
                }.navigationBarTitle("Grocery List", displayMode: .inline)
            }
        }
    }

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1