ios - SwiftUI:NavigationView 内 TabBar 内的 ListView 生成空 View

Question

我在 TabView 内有两个 ListView，而 TabView 又在 NavigationView 内。

当我运行此代码并滚动 ListView 内容时，我看到正在生成一个空 View ，该 View 似乎位于 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)
    }
}

这是什么？我该如何避免它？

Answer 1

归根结底，这是我对 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)
    }
}