SwiftUI - 设置背景颜色时大型导航栏被破坏

Question

我遇到了一个非常奇怪的错误，并且不知道如何解决它。我有一个带有导航标题的导航视图。我注意到，当我更改其包含视图的背景颜色时，导航栏与屏幕内容重叠，而不是切换到内联情绪。见下文。

如果我删除设置背景颜色的一行，那么一切都会正常。有人遇到过类似的情况吗？你是如何解决的？

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollView {
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
        VStack(alignment: .leading) {
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
          Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
        }
      }
      .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
      .background(Color.red)
      .navigationBarTitle(Text("Title"))
    }
  }
}

Answer 1

如果您不frame()这样做ScrollView，而是将所有VStacks 包装在另一个中VStack并调整其大小，它会起作用：

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollView {
        VStack{
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
            VStack(alignment: .leading) {
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 10")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 11")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 12")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 13")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 14")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 15")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 16")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 17")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 18")
              Text("djsgfjsdgf jhdjfhjhjh jdhfsjh 19")
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        .background(Color.red)
        .navigationBarTitle(Text("Title"))
      }
    }
  }
}