0

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

        }
    
    }
Erin Donahue
  • 23
  • 6
  • 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 Mar 03 '21 at 17:34
  • 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 Mar 03 '21 at 17:35
  • The code doesn't compile. Can you check `rgbColor` and `$deck.wrappedValue`? – aheze Mar 03 '21 at 18:17
  • @aheze it compiles. I think Im missing a bracket or something when I copied it – Erin Donahue Mar 03 '21 at 18:18
  • @ErinDonahue yeah there was a missing bracket. But besides that, what is `$deck.wrappedValue`? and `rgbColor`. – aheze Mar 03 '21 at 18:19
  • 1
    @aheze I initialize them earlier. should have been more clear. no issues with those though. Thanks so much for your help btw – Erin Donahue Mar 03 '21 at 18:23
  • @ErinDonahue np. Can you remove it then? See [this](https://stackoverflow.com/help/minimal-reproducible-example) - it's easier to see what's wrong when we can compile it. – aheze Mar 03 '21 at 18:24
  • @aheze definitely! this is my first post so sorry for the mess – Erin Donahue Mar 03 '21 at 18:27
  • @ErinDonahue I ran your code, and [this](https://github.com/aheze/DeveloperAssets/blob/master/Screen%20Shot%202021-03-03%20at%2010.55.48%20AM.png?raw=true) is the result. What is wrong with it? – aheze Mar 03 '21 at 18:56
  • @aheze anything below it overlaps – Erin Donahue Mar 03 '21 at 19:02

1 Answers1

1

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.

Erin Donahue
  • 23
  • 6