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，而是将所有VStack包裹在另一个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"))
      }
    }
  }
}