Question

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

运行此代码并滚动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)
    }
}

SwiftUI：NavigationView内TabBar内的ListViews生成空视图

1 个答案: