How to prevent NavigationView from affecting subviews

Question

I'd like to use a NavigationView for several reasons but when I wrap my view hierarchy in a NavigationView, things get messed up. Screen 1 shows the effect i'm after but the NavigationView has not been added yet. The code for screen 1 is:

struct ContentView: View {
    var body: some View {

        VStack(spacing:0) {
            Text("Text Above List")
                .frame(width: 375, height: 44)
                    .background(Color.gray)
            List() {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
                Text("Row 4")
                Text("Row 5")
              }
         }
    }
 }

By wrapping in a NavigationView the result is screen 2. Code for screen 2 is:

    struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing:0) {
                Text("Text Above List")
                    .frame(width: 375, height: 44)
                    .background(Color.gray)
                List() {
                    Text("Row 1")
                    Text("Row 2")
                    Text("Row 3")
                    Text("Row 4")
                    Text("Row 5")
                }
            }
            .navigationBarHidden(true)
        }
    }
}

Then by adding ".listStyle(GroupedListStyle())" the result is screen 3 - which is close but no cigar. I can't get rid of the space above the list but below the Text view above it. The space is obviously the header view but I can't make it go away. Code for screen 3 is:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing:0) {
                Text("Text Above List")
                    .frame(width: 375, height: 44)
                    .background(Color.gray)
                List() {
                    Text("Row 1")
                    Text("Row 2")
                    Text("Row 3")
                    Text("Row 4")
                    Text("Row 5")
                }
                .listStyle(GroupedListStyle())
            }
            .navigationBarHidden(true)
        }
    }
}

Any help with this would be greatly appreciated. I have pulling my hair out over this for way too long. Thanks.enter link description here

Tap the link "enter link description here" above, to see referenced screens.

Answer 1

I assume you wanted plain list style

var body: some View {
    NavigationView {
        VStack(spacing:0) {
            Text("Text Above List")
                .frame(maxWidth: .infinity, minHeight: 44)
                .background(Color.gray)
            List() {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
                Text("Row 4")
                Text("Row 5")
            }.listStyle(PlainListStyle())     // << here !!
        }
        .navigationBarHidden(true)
    }
}