VStack 中的视图重叠

问题描述

所以我在处理 vstack 中的 TopBar 视图时遇到了问题——它一直与我在它下面的图像重叠，并弄乱了该视图的格式。我查看了类似的线程并实际解决了我在图像中遇到的问题，但我没有看到与组合视图类似的问题。 （而且我在高中，所以我确定事情是混乱和令人费解的）

Without TopBar WithTopBar

内容视图：

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

顶部栏：

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

        }
    
    }

解决方法

我正在回答我自己的问题，以防有人偶然发现。由于某种原因，我只需要将每个菜单嵌入到一个单独的 VStack 中。尽管如此，您应该避免使用 geometryreader，因为这是问题的根源。