SwiftUI ForEach 在滚动视图中未正确更新

Question

我有一个 SwiftUI ScrollView，里面有一个 HStack 和一个 ForEach。 ForEach 是由 ObservableObject 的 Published 变量构建的，因此在添加/删除/设置项目时，它将在视图中自动更新。但是，我遇到了多个问题：

1. 如果数组一开始是空的，然后添加了项目，则不会显示它们。
2. 如果数组中有一些项目，我可以添加一项，它会显示，但添加更多则不会。

如果我只有一个带有 ForEach 的 HStack，上述问题都不会发生。一旦它在 ScrollView 中，我就会遇到问题。

下面是可以粘贴到 Xcode SwiftUI Playground 中以演示问题的代码。在底部，您可以取消注释/注释不同的行以查看两个不同的问题。

如果您取消注释问题 1，然后单击任一按钮，您将只看到 HStack 更新，而不是 ScrollView 中的 HStack 即使您看到这些项目的 init print 语句。

如果您取消注释问题 2，然后单击任一按钮，您应该会在第二次单击后看到 ScrollView 更新，但如果您继续单击它不会更新 - 即使只有 HStack 会继续更新并初始化打印语句是 ScrollView 项目的输出。

import SwiftUI
import PlaygroundSupport
import Combine

final class Testing: ObservableObject {
    @Published var items: [String] = []

    init() {}

    init(items: [String]) {
        self.items = items
    }
}

struct SVItem: View {
    var value: String

    init(value: String) {
        print("init SVItem: \(value)")
        self.value = value
    }

    var body: some View {
        Text(value)
    }
}

struct HSItem: View {
    var value: String

    init(value: String) {
        print("init HSItem: \(value)")
        self.value = value
    }

    var body: some View {
        Text(value)
    }
}

public struct PlaygroundRootView: View {
    @EnvironmentObject var testing: Testing

    public init() {}

    public var body: some View {
        VStack{
            Text("ScrollView")
            ScrollView(.horizontal) {
                HStack() {
                    ForEach(self.testing.items, id: \.self) { value in
                        SVItem(value: value)
                    }
                }
                .background(Color.red)
            }
            .frame(height: 50)
            .background(Color.blue)
            Spacer()
            Text("HStack")
            HStack {
                ForEach(self.testing.items, id: \.self) { value in
                    HSItem(value: value)
                }
            }
            .frame(height: 30)
            .background(Color.red)
            Spacer()
            Button(action: {
                print("APPEND button")
                self.testing.items.append("A")
            }, label: { Text("APPEND ITEM") })
            Spacer()
            Button(action: {
                print("SET button")
                self.testing.items = ["A", "B", "C"]
            }, label: { Text("SET ITEMS") })
            Spacer()
        }
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = UIHostingController(
    // problem 1
    rootView: PlaygroundRootView().environmentObject(Testing())

    // problem 2
    // rootView: PlaygroundRootView().environmentObject(Testing(items: ["1", "2", "3"]))
)

这是一个错误吗？我错过了什么吗？我是 iOS 开发新手。我确实尝试在 DispatchQueue.main.async 中包装实际的项目设置/附加，但这并没有做任何事情。

另外，可能不相关，但如果您单击按钮足够多，应用程序似乎会崩溃。

Answer 1

刚刚遇到同样的问题。解决了空数组检查和不可见的 HStack

ScrollView(showsIndicators: false) {
    ForEach(self.items, id: \.self) { _ in
        RowItem()
    }

    if (self.items.count == 0) {
        HStack{
            Spacer()
        }
    }
}

Answer 2

已知ScrollView 的行为与观察到的空容器 - 它需要一些东西（初始内容）来计算初始大小，因此以下解决了您的代码行为

@Published var items: [String] = [""]

一般来说，在这种情况下，我更喜欢在数组中存储一些“易于检测的初始值”，当第一个“真实模型值”出现时将其删除，然后在最后一个消失时再次添加。希望这会有所帮助。

Answer 3

为了更好的可读性，也因为答案对我不起作用。我建议将@TheLegend27 的答案稍微修改如下：

if self.items.count != 0 {

   ScrollView(showsIndicators: false) {
       ForEach(self.items, id: \.self) { _ in
           RowItem()
       }
   }

}