VStack中的视图重叠

Question

所以我在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中。不过，您应该避免使用几何阅读器，因为这是问题的根源。