如何防止NavigationView影响子视图

问题描述

出于某些原因，我想使用NavigationView，但是当我将视图层次结构包装在NavigationView中时，事情就搞砸了。屏幕1显示了我所追求的效果，但是NavigationView尚未添加。屏幕1的代码是：

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

通过在NavigationView中包装，结果是屏幕2。屏幕2的代码是：

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

然后添加“ .listStyle（GroupedListStyle（））”，结果是屏幕3-关闭但没有雪茄。我无法摆脱列表上方但上方的“文本”视图下方的空间。该空间显然是标题视图，但我无法使其消失。屏幕3的代码是：

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

任何对此的帮助将不胜感激。我在这上面拉头发太久了。谢谢。enter link description here

点击上方的链接“在此处输入链接描述”，以查看引用的屏幕。

解决方法

我认为您想要纯列表样式

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