Views in VStack overlapping

Question

So I am having trouble with the view TopBar in a VStack -- it keeps overlapping with the Image I have beneath it and messing up the ret of the formatting for that view. I've looked through similar threads and actually fixed an issue I was having with the image but I haven't seen something similar with the combining views. (Also I am in High School so I am sure things are messy and convoluted)

Without TopBar WithTopBar

Content view:

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

        }
    
    }

There is a lot of incoherences in your code. Why do you have the top bar commented out ? Why do you have a VStack commented out ? Why is the "top bar" not actually at the top of your interface ? Why do you have multiple HStack that only contain one element (around your menus) ? And why do you have all your views embedded inside a geometry reader ? I consider geometry reader as a feature to use when you don't have native support for what you're trying to do in swiftui. In your case everything you're trying to do is supported, so no need to use it. — Titouan
Your problem might actually be in the use of geometry readers as they allow for childrens to be positioned outside the initial view. Try removing them. And make use of padding too rather than doing that : .frame(width: geometry.size.width * 0.9, height: 50) — Titouan
The code doesn't compile. Can you check rgbColor and $deck.wrappedValue? — aheze
@aheze it compiles. I think Im missing a bracket or something when I copied it — Erin Donahue
@aheze I initialize them earlier. should have been more clear. no issues with those though. Thanks so much for your help btw — Erin Donahue

Erin Donahue Erin Donahue · Accepted Answer · 2021-03-04T17:34:14

I am answering my own question in case someone stumbles on this. I just needed to embed each menu in an individual VStack for some reason. Although, you should avoid the geometryreader since that was the source of the issue.

Views in VStack overlapping

1 Answers