时间戳

首页 > 解决方案 > 如何防止 NavigationView 影响子视图

list - 如何防止 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)
        }
    }
}

对此的任何帮助将不胜感激。我已经把头发拉出来太久了。谢谢。在此处输入链接描述

点击上面的链接“在此处输入链接描述”，以查看参考屏幕。

标签： listswiftuinavigationview

解决方案

我假设您想要简单的列表样式

演示

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

推荐阅读