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

【问题标题】：SwiftUI: ListViews inside TabBar inside NavigationView generates empty ViewSwiftUI：NavigationView 内 TabBar 内的 ListViews 生成空视图
【发布时间】：2020-01-25 20:20:59
【问题描述】：

我在TabView 中有两个ListView，而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)
    }
}

这是什么？如何避免？

【问题讨论】：

标签： ios listview swiftui navigationview tabview

【解决方案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)
    }
}

【讨论】：