SwiftUI：在动态列表顶部添加视图会导致视图缩小

Question

我有一个简单的SwiftUI 列表，它从Combine 发布者异步显示数字，当我在列表顶部添加View 作为标题视图时，我遇到了一个奇怪的收缩当数据从发布者返回时，Content View 被重绘时，标题发生或 闪烁：

这是具有发布者的视图模型类：

class ViewModel: ObservableObject {
    @Published var items: [Int] = []
    var subscriptions = Set<AnyCancellable>()

    init() {
            (0...10)
            .publisher
            .delay(for: .seconds(3), scheduler: DispatchQueue.main) //to simulate async call
            .sink { (value) in
            self.items.append(value)
        }
        .store(in: &subscriptions)
    }
}

这是与上述视图模型交互的ContentView 结构：

struct ContentView: View {
    @ObservedObject var viewModel: ViewModel
    var body: some View {

        List {
            VStack {
                Rectangle()
                Text("Some Text")
                Text("Some Other Very Long Text Some Other Some Other Long Text")
            }
            .background(Color.red)

            ForEach(viewModel.items, id: \.self) {  item in
                Text("\(item)")
            }
        }
    }
}

结果如下：

我尝试将列表顶部的VStack 分隔为外部View，但没有任何改变。

是什么导致了这种奇怪的收缩，有没有办法避免它？

Answer 1

解决方法是使用显式列表行插入，如下所示...

List {
    VStack {
        Rectangle()
        Text("Some Text")
        Text("Some Other Very Long Text Some Other Some Other Long Text")
    }
    .background(Color.red)
    .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

    ForEach(viewModel.items, id: \.self) {  item in
        Text("\(item)")
    }
    .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)
}