SwiftUI NavigationView 屏幕底部的额外空间答案

【问题标题】：SwiftUI NavigationView extra space at bottom of screenSwiftUI NavigationView 屏幕底部的额外空间
【发布时间】：2020-08-10 01:32:17
【问题描述】：

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

这是我的主页视图：

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

这是我的 ContentView 和 TabView：

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

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

【问题讨论】：

如果您可以分享更多代码，它会有所帮助，例如 View 之前的 HomeView。另外，你在某处有TabView 吗？
刚刚在我的 ContentView 中发布了 TabView 代码，谢谢！！
刚刚想通了！很抱歉浪费您的时间，它在 ContentView 的我的 init() 中。由于某种原因，它不喜欢我将 isTranslucent 设置为 false
嗯...测试您更新的代码确实显示UITabBar.appearance().isTranslucent = false 导致问题。有趣...一定是 SwiftUI 的 bug

标签： swift swiftui navigationview

【解决方案1】：

想通了！

在我的 init() 中，这行代码创建了另一个标签栏。不知道为什么它不喜欢这样的代码，但下一行很好：

UITabBar.appearance().isTranslucent = false

谢谢各位！我昨晚和今天早上都花了这个哈哈，从 React Native 学习 swift 仅仅几周。

【讨论】：

看起来像一个 SwiftUI 错误。此外...我认为您应该将答案标记为“已接受”。很好的发现。
我刚刚遇到了这个错误 - 从字面上删除上面的行解决了这个问题。很惊讶它仍然存在于 Xcode 12.3 中

【解决方案2】：

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

UITabBar.appearance().isTranslucent = false

到

UITabBar.appearance().backgroundImage = UIImage()

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

 UITabBar.appearance().backgroundColor = .white

【讨论】：

这最终对我有用（Xcode 12.3），添加backgroundColor，但为了避免半透明，我还必须包括UITabBar.appearance().barTintColor(.white) - 匹配BG + tint

【解决方案3】：

我将 UIKit 与 SwiftUI 一起使用。我的标签栏是在情节提要中创建的，但正如你提到的那样，我获得额外底部空间的视图是在 SwiftUI 上。我尝试了上述所有解决方案，但没有任何效果。

我正在使用 Xcode 12.4 进行开发。我的解决方案是在情节提要中将 Translucent 标记为 true，并且底部多余的灰色条消失了。

【讨论】：

【解决方案4】：

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

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

【讨论】：