SwiftUI导航查看屏幕底部的额外空间

Question

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

这是我的HomeView：

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")
}

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

Home View

提前感谢大家可能提供的任何帮助！

Answer 1

想通了！

在我的init（）中，这行代码正在创建似乎是另一个标签栏的代码。不确定为什么不喜欢这样的代码，但是在下一行就可以了：

UITabBar.appearance().isTranslucent = false

谢谢大家！我昨晚整晚都花了这个哈哈，距离React Native很快就学了很快。

Answer 2

要获得相同的结果而不会出现间距问题，请更改代码

UITabBar.appearance().isTranslucent = false

收件人

UITabBar.appearance().backgroundImage = UIImage()

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

 UITabBar.appearance().backgroundColor = .white

Answer 3

我在 SwiftUI 中使用了 UIKit。我的 Tab 栏是在故事板中创建的，但是正如您提到的，我获得额外底部空间的视图是在 SwiftUI 上。我尝试了上述所有解决方案，但没有任何效果。

我使用 Xcode 12.4 进行开发。我的解决方案是在故事板中将 Translucent 标记为 true 并且底部额外的灰色条消失了。

Answer 4

我们的应用程序是 Swift 和 SwiftUI 的组合 - 我们发现不需要 NavigationView 本身，因为（我们目前认为）它是从 Swift 继承的。 >

因此，我们可以在没有 NavigationLinks 包装器的情况下使用 NavigationView 并且一切正常 - 它删除了底部的额外空间。