SwiftUI NavigationView 屏幕底部的额外空间

Question

我是 Swift 的新手，我正在尝试使用 SwiftUI 中的 NavigationView 创建一个简单的屏幕。出于某种原因，当我在 NavigationView 内包装任何东西时，它会在底部添加额外的空间。我想看看是否还有其他人遇到这个问题。

这是我的主页：

struct HomeView: View {
    var body: some View {
        NavigationView {
                ZStack {
                    Color.surface.edgesIgnoringSafeArea(.all)
                    Text("HOME")
                }
        }
    }
}

这是我的带有 TabView 的 ContentView：

struct ContentView: View {
    @EnvironmentObject var session: SessionStore
    @State private var selected = 1
    @State private var loaded: Bool = false

    var ref: DatabaseReference! = Database.database().reference()

    func getUser() {
        //Promisify this
        session.listen()
        self.loaded = true
        // Firebase test
        self.ref.child("users").child("test").setValue(["username" : "TEST"])
    }


    // Sets the bottom tab background color
    init(){
        UITabBar.appearance().isTranslucent = false
        UITabBar.appearance().barTintColor = UIColor(named: "card2")
    }

    var body: some View {
        Group {
            if (self.loaded == false){
                Text("loading...")
            }

            else if (session.session != nil) {
                TabView(selection: $selected) {
                    HomeView()
                        .tabItem {
                            Image(systemName: "music.house.fill")
                            Text("Home")
                        }

                    MyRoutinesView()
                        .tabItem({
                            Image(systemName: "music.note.list")
                            Text("My Routines")
                        }).tag(1)

                    MetronomeView()
                        .tabItem({
                            Image(systemName: "music.note")
                            Text("Tools")
                        }).tag(2)

                    SettingsView()
                        .tabItem({
                            Image(systemName: "gear")
                            Text("Settings")
                        }).tag(3)

                }
                //.background(Color.surface)
                .accentColor(Color.white)
                //.font(.headline)
            } else if (self.loaded == true && session.session == nil) {
                AuthView()
            }
        }.onAppear(perform: getUser)
    }
}

// Gets colors from assets
extension Color {
    static let primary = Color("primary")
    static let secondary = Color("secondary")
    static let surface = Color("surface")
    static let card = Color("card")
    static let cardShadow = Color("cardShadow")
    static let card2 = Color("card2")
}

这就是目前的样子（问题是标签导航上方的空间）：

主页视图

预先感谢您提供的任何帮助！

Answer 1

弄清楚了！

在我的 init() 中，我有这行代码正在创建似乎是另一个标签栏的内容。不知道为什么它不喜欢这样的代码，但下一行没问题：

UITabBar.appearance().isTranslucent = false

谢谢你们！我昨晚和今天早上都得到了这个哈哈，从 React Native 开始学习 swift 只花了几周时间。

Answer 2

要在没有间距问题的情况下获得相同的结果，请更改代码

UITabBar.appearance().isTranslucent = false

到

UITabBar.appearance().backgroundImage = UIImage()

此时，您还可以将背景颜色设置为定义的颜色，而无需调整 UITabBar 的背景颜色的半透明效果。

 UITabBar.appearance().backgroundColor = .white