Ios SwiftUI:NavigationView内选项卡栏内的ListView生成空视图

我在

选项卡视图中有两个
列表视图
，而选项卡视图又在
导航视图
中

当我运行此代码并滚动
ListView
内容时，我看到生成了一个空视图，它似乎位于
ListView
行的顶部

当列表视图一直滚动到顶部时，它将完全覆盖第一项

import SwiftUI

struct ContentView: View {

    @State private var gibsonGuitars = [ Guitar(id: 1, name: "Les Paul")]
    @State private var fenderGuitars = [ Guitar(id: 1, name: "Stratorcaster")]
    @State private var selectedView = 0

    private let brandGibson = "Gibson Guitars"
    private let brandFender = "Fender Guitars"

    private var title: String {
        $selectedView.wrappedValue == 0 ? brandGibson : brandFender
    }

    var body: some View {
        NavigationView {
            TabView(selection: $selectedView) {
                GuitarListView(guitars: $gibsonGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandGibson)
                    }
                    .tag(0)
                GuitarListView(guitars: $fenderGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandFender)
                    }
                    .tag(1)
                }
                .navigationBarTitle(Text(title))
            GuitarDetail()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())

    }
}

struct Guitar: Identifiable {
    var id: Int
    var name: String
}

struct GuitarListView: View {
    @Binding var guitars: [Guitar]
    var body: some View {
        List(guitars) { guitar in
            Text(guitar.name)
        }.listStyle(GroupedListStyle())
    }
}

struct GuitarDetail: View {
    @State var guitar: Guitar?
    var body: some View {
        guard let guitar = guitar else {
            return Text("No Guitar Selected.")
        }
        return Text("\(guitar.name)").font(.largeTitle)
    }
}

这是什么？我如何避免它


最后，这是因为我对SwiftUI中的安全区域缺乏了解。我可以通过添加
.edgesIgnoringSafeArea（.top）

    import SwiftUI

struct ContentView: View {

    @State private var gibsonGuitars = [ Guitar(id: 1, name: "Les Paul")]
    @State private var fenderGuitars = [ Guitar(id: 2, name: "Stratorcaster")]
    @State private var selectedView = 0

    private let brandGibson = "Gibson"
    private let brandFender = "Fender"

    private var title: String {
        $selectedView.wrappedValue == 0 ? brandGibson : brandFender
    }

    var body: some View {
        NavigationView {
            TabView(selection: $selectedView) {
                    GuitarListView(guitars: $gibsonGuitars)
                        .tabItem {
                            Image(systemName: "guitars")
                            Text(brandGibson)
                        }
                        .tag(0)
                    GuitarListView(guitars: $fenderGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandFender)
                    }
                    .tag(1)
            }
            .edgesIgnoringSafeArea(.top)
            .navigationBarTitle(title)
            GuitarDetail()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

struct Guitar: Identifiable {
    var id: Int
    var name: String
}

struct GuitarListView: View {
    @Binding var guitars: [Guitar]
    var body: some View {
        List(guitars) { guitar in
            Text(guitar.name)
        }.listStyle(GroupedListStyle())
    }
}

struct GuitarDetail: View {
    @State var guitar: Guitar?
    var body: some View {
        guard let guitar = guitar else {
            return Text("No Guitar Selected.")
        }
        return Text("\(guitar.name)").font(.largeTitle)
    }
}