SwiftUI NavigationView底部有额外空间

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

以下是当前的显示效果（问题出现在选项卡导航上面的空白处）：

主页视图

非常感谢您所提供的任何帮助！

- JakeRuth

---

如果您能分享更多的代码，那会很有帮助，比如在 HomeView 之前出现的 View。另外，您是否在某个地方使用了 TabView？ - staticVoidMan

刚刚在我的 ContentView 中发布了 TabView 代码，谢谢！ - JakeRuth

刚刚找到了！很抱歉浪费了您的时间，原来是在我的ContentView的init()函数中。由于某种原因，它并不喜欢我将isTranslucent设置为false。 - JakeRuth

嗯……测试你更新的代码确实显示UITabBar.appearance().isTranslucent = false导致问题。有趣的是……一定是SwiftUI的一个漏洞。 - staticVoidMan

Answer 1

为了不出现间距问题并达到相同的结果，请更改代码。

UITabBar.appearance().isTranslucent = false

To

UITabBar.appearance().backgroundImage = UIImage()

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

 UITabBar.appearance().backgroundColor = .white

- Fields Cage

---

这是最终对我起作用的代码（Xcode 12.3），添加 backgroundColor，但为了避免半透明，我还必须包括 UITabBar.appearance().barTintColor(.white) - 匹配背景色和色调。 - DEVIGNR

Answer 2

明白了！

在我的init()函数中，我有一行代码创建了另一个选项卡栏。不确定为什么它不喜欢这行代码，但接下来的一行没问题：

UITabBar.appearance().isTranslucent = false

感谢大家！昨晚和今天早上我都在学习这个，哈哈，我只是从React Native转来学Swift几周而已。

- JakeRuth

---

看起来是SwiftUI的一个bug。另外...我认为你应该将你的答案标记为“已接受”。干得好。 - staticVoidMan

我刚遇到了这个 bug - 只需删除上面的一行即可解决问题。惊讶的是它在 Xcode 12.3 中仍然存在。 - SparkyRobinson

Answer 3

我们的应用程序是Swift和SwiftUI的组合 - 我们发现没有必要使用NavigationView本身，因为（我们目前认为）它已经在Swift中继承了。

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

- rdehuyss

Answer 4

我正在使用SwiftUI与UIKit。我的Tab bar是在storyboard中创建的，但是我得到额外的底部空间，就像你提到的那样，这个视图是在SwiftUI中创建的。我尝试了所有上面的解决方案，但都没有用。

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

- Mohit Kumar