【问题标题】:NavigationView doesn't display correctly when using TabView in SwiftUI在 SwiftUI 中使用 TabView 时,NavigationView 无法正确显示
【发布时间】:2020-01-06 19:34:42
【问题描述】:

大家好。我正在开发一个显示一些推文的简单 SwiftUI 应用程序。它有一个带有两个视图的选项卡视图:将显示推文的主页面和一个辅助视图。

问题是主页有一个NavigationView。如果我选择只显示主页,一切似乎都是正确的,但是当我从TabView 显示它并向下滚动时,NavigationView 感觉有点奇怪。

由于我不擅长解释,这里有一些图片:

应该是这样的

不过是这样的

本来想加.edgesIgnoringSafeArea(.top)的,但是NavigationView现在被槽口隐藏了,没有效果。

有什么方法可以让 NavigationView 像第一张图片一样显示?

感谢任何帮助。提前致谢。

我的代码

主页视图

struct HomePageView: View {

    var body: some View {
        NavigationView {
            List {
                //tweet code
            }
            .navigationBarTitle("Your feed")
        }
    }
}

选项卡视图

struct TabController: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            HomePageView()
                .tabItem {
                    VStack {
                        Image(systemName: "house.fill")
                            .font(.title)
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image(systemName: "bell.fill")
                            .font(.title)
                    }
                }
                .tag(1)
        }
    }
}

【问题讨论】:

  • 有趣的是,这个问题已经不存在了。我可以使用您的示例代码,并且没有任何重叠。但是一旦我添加edgesIgnoringSafeArea(.top),结果就变得很糟糕:状态栏和导航标题崩溃了。这是只出现在 Xcode 11 beta 版本中的问题吗?
  • @pd95 既然你提到了它,是的,这个问题在最新的 Xcode 版本上并没有持续存在。也许是 SwiftUI 测试版的问题?

标签: swift swiftui tabview ios-navigationview


【解决方案1】:

尝试将.edgesIgnoringSafeArea(.top) 添加到您的标签视图。

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            HomePageView()
                .tabItem {
                    VStack {
                        Image(systemName: "house.fill")
                            .font(.title)
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image(systemName: "bell.fill")
                            .font(.title)
                    }
                }
                .tag(1)
        }.edgesIgnoringSafeArea(.top)
    }
}

【讨论】:

  • 这已在 iOS 13.4 中修复;但是,不删除 edgesIgnoringSafeArea 会导致 NavigationView 被剪裁