ios - View 不会在 SwiftUI 的 ForEach 内部更新

Question

我正在使用 ForEach 来解析模型列表并为每个模型创建一个 View ，每个 View 都包含一个 Button 和一个 Text，Button 切换可见性状态，该状态应隐藏文本并更改 Button 的标题(不可见/可见)。

struct ContentView: View {

    var colors: [MyColor] = [MyColor(val: "Blue"), MyColor(val: "Yellow"), MyColor(val: "Red")]

    var body: some View {

        ForEach(colors, id: \.uuid) { color in
            ButtonColorView(color: color.val)
        }

    }
}

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {

        if visible {
            return AnyView(  HStack {
                Button("Invisible") {
                    self.visible.toggle()
                }
                Text(color)
            })
        } else {
            return AnyView(
                Button("Visible") {
                    self.visible.toggle()
                }
            )
        }
    }
}



class MyColor: Identifiable {
    let uuid = UUID()
    let val: String

    init(val: String) {
        self.val = val
    }
}

不幸的是，它不起作用，ForEach 中的 View 在按下 Button 时不会改变。我用 ButtonColorView(color: colors[0].val) 替换了 Foreach 并且它似乎有效，所以我想说问题出在 ForEach.

我还在 ButtonColorView 中尝试了断点，看起来当 Button 被触发返回正确的 View 时 View 被调用，无论如何 View 不会在屏幕上更新。

那么，我是否以错误的方式使用了 ForEach？

这个问题出现在一个更复杂的应用程序中，但我试图在这个小例子中提取它。总结一下:我需要 ButtonColorView 根据其状态(在本例中为可见性)返回不同的 View

PS:我使用的是 Xcode 11 Beta 6

Answer 1

您正在正确使用 ForEach。我认为是 ButtonColorView 主体中的 if 语句导致了问题。试试这个:

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {
        HStack {
            Button(visible ? "Invisible" : "Visible") {
                self.visible.toggle()
            }
            if visible {
                Text(color)
            }
        }
    }
}

你也可以这样尝试:

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {
        HStack {
            if visible {
                HStack {
                    Button("Invisible") {
                        self.visible.toggle()
                    }
                    Text(color)
                }
            } else {
                Button("Visible") {
                    self.visible.toggle()
                }
            }
        }
    }

}