SwiftUI: добавление представления вверху динамического списка c приводит к уменьшению представления

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)
}