ios - 如果顶部有标题 View ，如何在 SwiftUI 列表下正确显示数据

Question

我发现使用 Xcode 11.6 的 SwiftUI List{} 函数有一个奇怪的行为
如果我在列表顶部添加 View ，则会发生数据混淆。
如果我删除顶 View ，它会恢复正常。
如果我需要顶 View ，这个问题有什么解决方法吗？
下载演示:https://github.com/BellRinging/bugDemo.git
代码示例:

import SwiftUI



  struct GameView: View {
            
    @ObservedObject var viewModel: GameViewModel
    @State var isShowing : Bool = false
    
    init(){
        viewModel = GameViewModel.shared
        print("init Game")
    //        viewModel.status = .loading
    //        viewModel.onInitialCheck()
        
    }


    var body: some View {
        NavigationView{
            VStack{
                //if there is a top view , The list Item mixd up
                VStack{
                    Text("Top Area").foregroundColor(Color.white)
                }.background(Color.red).frame(height:100)

            GameViewListHistoryArea(sectionHeader: self.viewModel.sectionHeader, games: self.viewModel.textItems)
            Spacer()
                
            }
            .navigationBarTitle("", displayMode: .inline)
  

          }
        }
    }



    struct GameViewListHistoryArea: View {
        
        @ObservedObject var viewModel: GameViewListAreaViewModel
    
        init(sectionHeader: [String],games:[String:[String]]){
            viewModel = GameViewListAreaViewModel(sectionHeader: sectionHeader, games: games)
        }
    
        var body: some View {
            VStack{
                List {
                    ForEach(self.viewModel.sectionHeader, id: \.self) { period in
                        Section(header: self.sectionArea(period:period)) {
                            ForEach(0 ..< self.viewModel.games[period]!.count ,id: \.self) { index in
                                Text("\(period) \(index)")
                            }
                        }
                    }
                }
            }
        }
    
        func sectionArea(period : String) -> some View {
            HStack{
                Text(period)
                Spacer()
            }
        }
    
    }



class GameViewListAreaViewModel: ObservableObject {
    
    
    var sectionHeader : [String]
    var games : [String:[String]]
    
    init(
        sectionHeader: [String],
        games:[String:[String]]){
        self.sectionHeader = sectionHeader
        self.games = games
    }
    
    
}


class GameViewModel: ObservableObject {
    
    static let shared = GameViewModel()
    
    
    @Published var textItems: [String:[String]] =  [:]
    @Published var sectionHeader : [String] = []
    
    init() {
        loadGame()
    }
    
    
    func loadGame(){
        self.textItems = self.makeRecord()
        self.sectionHeader = self.textItems.keys.sorted(by: >)
    }

    func makeRecord() -> Dictionary<String,[String]>{
        
        var dict : Dictionary<String,[String]> = [:]
        
        let jul20 = ["20200720","20200717","20200716","20200712","20200710","20200709","20200703"]
        let jun20 = ["20200630","20200628","20200620","20200614","20200606"]
        let may20 = ["20200531","20200529","20200527","20200524","20200520","20200519","20200517","20200515","20200513","20200509","20200507","20200502"]
        let apr20 = ["20200429","20200427","20200424","20200421","20200418","20200413","20200410","20200409","20200406","20200403","20200401"]
        let mar20 = ["20200329","20200327","20200322","20200320","20200315","20200313","20200307","20200305"]
        let feb20 = ["20200228","20200226","20200221","20200219","20200212","20200210"]
        
        dict["202007"] = jul20
        dict["202006"] = jun20
        dict["202005"] = may20
        dict["202004"] = apr20
        dict["202003"] = mar20
        dict["202002"] = feb20
        return dict
    }
   
}

期待这样的布局..用 VStack 替换列表

实际结果是这种奇怪的行为

Answer 1

适用于 Xcode 11.4 和 Xcode 12(我没有 11.6)。无论如何，问题的原因可能是由于每个部分中行的非唯一 ID(使用的有序索引)，因此 List 决定不刷新它们。
尝试改用

Section(header: self.sectionArea(period:period)) {
    ForEach(Array(self.viewModel.games[period]!.enumerated()) ,id: \.1) { index, _ in
        Text("\(period) \(index)")
    }
}

注意:在提到的测试版本上，结果是相同且正确的。