ios - 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但没有任何改变。

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

标签： iosswiftswiftui

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