VStack重叠视图

Question

所以，我在VStack中遇到了视图VStack的问题--它一直与它下面的图像重叠，并破坏了该视图的格式设置。我看过类似的线程，实际上修复了图像中的一个问题，但我没有看到与合并视图类似的东西。(我也在读高中，所以我确信事情很乱，很复杂。)

无TopBar WithTopBar

内容视图：

        ScrollView {
        
            VStack{
                
                
                Text("Sample Text")
                    .padding(.top, 50)
                
                TopBar()
                
                Image("Divider")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width * 0.8,

            }
        }

TopBar:

            VStack{
          
                Spacer()
              
                    Menu("Menu") {
                        Button("A", action: {print("test")})
                        Button("B", action: {print("test")})
                        Button("C", action: action: {print("test")})
                    }
                    .frame(width: geometry.size.width * 0.8, alignment: .leading)

                    Menu("Menu 2") {
                        Button("E", action: {print("test")})
                         Button("F", action: {print("test")})
                         Button("G", action: {print("test")})
                      }
                     .frame(maxWidth: .infinity, minHeight: 50)
               
                Spacer()
            }
          

        }
    
    }

Answer 1

我正在回答我自己的问题，以防有人在这件事上绊倒。出于某种原因，我只需要将每个菜单嵌入到单独的VStack中。虽然，您应该避免几何读取器，因为这是问题的根源。