在 SwiftUI 中使用 TabView 时，NavigationView 无法正确显示 [英] NavigationView doesn't display correctly when using TabView in SwiftUI

问题描述

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

Hello everyone. I'm developing a simple SwiftUI application that displays some tweets. It has a tab view with two views: the main page that will display the tweets and a secondary view.

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

The problem is that the main page has a NavigationView. If I choose to display only the main page, everything seems correct, but when I display it from the TabView and I scroll down, the NavigationView feels a bit weird.

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

As I'm not good at explaining, here you have some images:

应该是这样

但就是这样

我想添加 .edgesIgnoringSafeArea(.top)，但 NavigationView 现在被缺口隐藏了，没有效果.

I thought of adding .edgesIgnoringSafeArea(.top), but the NavigationView is now hidden by the notch and it doesn't make the effect.

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

Is there any way I can make the NavigationView display like in the first image?

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

Any help is appreciated. Thanks in advance.

主页视图:

struct HomePageView: View {

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

TabView:

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) 添加到您的 tabview.

Try adding .edgesIgnoringSafeArea(.top) to your tabview.

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

这篇关于在 SwiftUI 中使用 TabView 时，NavigationView 无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！