How to add the Navigation Bar space in SwiftUI NavigationView

Question

I hide the navigation bar and provide a customized navigation bar. But my list appears below the navigation bar. I want the list to appear below the navigation bar when scrolling.

My desired effect:

Actual effect: Blocked 0

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            TabView {
                FirstView()
                    .tabItem {
                        Image(systemName: "folder.fill")
                        Text("Home")
                    }
                
                SecondView()
                    .tabItem {
                        Image(systemName: "folder.fill")
                        Text("SecondView")
                    }
            }
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct FirstView: View {
    
    var body: some View {
        ZStack(alignment: .top) {
            List {
                
                ForEach(0..<40, id: \.self) { index in
                    Text("cell view \(index)")
                }
            }
            .listStyle(.inset)
            
            HStack {
                Text("首页")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 44)
            .background(.bar)
        }
        .navigationBarTitleDisplayMode(.inline)
        //.ignoresSafeArea(edges: .)
    }
}

struct SecondView: View {
    
    var body: some View {
        List {
            ForEach(0..<40, id: \.self) { index in
                Text("FirstView2")
            }
        }
        .listStyle(.inset)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Please do not add padding to the List. This is a security zone problem.

Answer 1

Edit: scrolling under the header

For a glass effect under the header:

You can add a "dummy" element that will push the list one row down. So the the header will cover the dummy element and the whole list will be visible.

struct FirstView: View {
    
    var body: some View {
        ZStack(alignment: .top) {
            List {
                
                // Dummy Text
                Text("")
                
                ForEach(0..<40, id: \.self) { index in
                    Text("cell view \(index)")
                }
            }
            .listStyle(.inset)
            
            HStack {
                Text("首页")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 44)
            .background(.bar)
            .opacity(0.7)

        }
        .navigationBarTitleDisplayMode(.inline)
        //.ignoresSafeArea(edges: .)
    }
}

Original answer

Your FirstView is using a ZStack, which tells exactly the compiler to show one view on top of (covering) the other. Use a VStack, that should solve your issue.

struct FirstView: View {

    var body: some View {
        VStack {
            HStack {
                Text("首页")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 44)
            .background(.bar)

            List {
                
                ForEach(0..<40, id: \.self) { index in
                    Text("cell view \(index)")
                }
            }
            .listStyle(.inset)
            
        }
        .navigationBarTitleDisplayMode(.inline)
        //.ignoresSafeArea(edges: .)
    }
}