在LazyVGrid中没有显示文本视图

Question

我经历了将文本视图放置在嵌套ForEach中的一个LazyVGrid视图的奇怪行为。我的代码看起来像这样

LazyVGrid(columns: dataColumns) {
    ForEach(months, id: \.self) { month in
        Text("\(dateFormatter.string(from: month))")
    }
    ForEach(categories) { category in
        ForEach(months, id: \.self) { month in
            Text("aaa")
        }
    }
}

并没有显示"aaa“字符串，但如果我只添加另一个文本视图，如下所示

ForEach(months, id: \.self) { month in
    Text("aaa")
    Text("bbb")
}

然后，两个带有字符串的文本视图都按预期的方式重复显示。有什么想法吗？谢谢。

Answer 1

这里的问题与视图标识有关。LazyVGrid使用每个视图标识来知道何时需要加载它们。

SwiftUI还使用结构标识来根据视图层次结构识别视图。这就是为什么当您将另一个视图添加到ForEach实例时，视图会显示，因为它们现在在结构上可以从其他ForEach内容中唯一地识别出来。

这里，在ForEach中有两个单独的LazyVGrid实例，它们使用相同的标识符。两个forEach实例使用months和id \.self来识别它们。这些都是相互冲突的，应该是唯一的，以避免这类问题。

要解决这个问题，最好为每个ForEach实例使用一个唯一的元素数组，不过可以创建一个months数组的副本，以便在第二个ForEach中使用，而不是引用相同的实例。下面是一个例子：

import SwiftUI
import MapKit

struct MyType: Identifiable, Hashable {
    var id = UUID()

    var name = "Tester"
}

struct ContentView: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible())]
    var months: [MyType] = []
    var monthsCopy: [MyType] = []

    private var monthValues: [MyType] {
        [MyType()]
    }

    init() {
        months = monthValues
        monthsCopy = monthValues
    }

    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(months) { _ in
                Text("Test1")
                Text("Test2")
            }

            ForEach(monthsCopy) { _ in
                Text("Test3")
                Text("Test4")
            }
        }
    }
}

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

如果将ForEach(monthsCopy)替换为ForEach(months)，您将看到所面临的问题。