添加 .id() 后列出空的部分

List sections empty after adding .id()

数组中的每个元素都有一个部分。我需要使用 ScrollViewReader,所以我需要将 .id() 添加到每一行。但是,当我添加 id 时,列表行变为空。没有 id 修饰符它工作正常。见下图:

这是我制作的演示此问题的示例项目:

import SwiftUI
import PlaygroundSupport

struct Interval: Identifiable {
    var id = UUID()
    var index: Int
    var name : String {
        "Interval \(index)"
    }
}

struct ContentView: View {
    
    var intervals: [Interval] = (1...9).map { index in Interval(index: index) }
    
    var body: some View {
        List {
            ForEach(intervals, id: \.id) { interval in
                Section {
                    Text(interval.name)
                        //.id(interval.id) // try removing this comment
                }
            }
        }
    }
    
}

PlaygroundPage.current.setLiveView(ContentView())

我做过的一些调试:

只有 1 个部分有效,但我需要一个部分用于每个元素。

Section {
    ForEach(intervals, id: \.id) { interval in
        Text(interval.name)
            .id(interval.id)
    }
}

手动添加每个部分也可以,但这无法完成,因为我的实际项目中有很多部分。

Section {
    Text(intervals[0].name)
        .id(intervals[0].id)
}
Section {
    Text(intervals[1].name)
        .id(intervals[1].id)
}

有谁知道如何解决这个问题?谢谢。

以下使用 VStack 对我有效(在真实设备上):

var body: some View {
    List {
        ForEach(intervals) { interval in
            Section {
                VStack { // <-- here
                    Text(interval.name).id(interval.id)
                }
            }
        }
    }
}

尽管@dudette 的回答解决了我实际项目中的空单元格问题,但在使用 ScrollViewReader 的 scrollTo 方法时滚动到所需 cell/row 无效。

我想出了一个对我有用的奇怪修复方法。这很奇怪,因为我不知道它如何工作以及为什么工作,但它确实有效。如果有人能解释一下为什么会这样,我将不胜感激。

解决方案是,我创建了一个名为 EmbedInSection 的新 ViewModifier,它只是将内容嵌入到 Section 中。

struct EmbedInSection: ViewModifier {
    func body(content: Content) -> some View {
        Section {
            content
        }
    }
}

我用它是这样的:

var body: some View {
    List {
        ForEach(intervals) { interval in
            Text(interval.name)
                .id(interval.id)
                .modifier(EmbedInSection())
        }
    }
}