SwiftUI button position relative to background

Question

In SwiftUI, I'm trying to make a map, and when the user clicks on one of the stops, the info sheet will pop up.

I was going use the map in a ZStack, but how do I place the buttons on top of the stops; how do I define the position of the button so this works in landscape or portrait?

struct ContentView: View {
  var body: some View {
    GeometryReader { geometry in
      VStack{
        ZStack {
          Image("background")
            .resizable()
            .aspectRatio(contentMode: .fit)
          Button(action: {}) {
          Text("Button")
          }.position(x: 200, y: 150)
        }.frame(width: geometry.size.width, height: geometry.size.height/4)

        myMasterDetailView()
      }
    }
  }
}

struct myMasterDetailView: View {
  var body: some View {
      GeometryReader { geometry in
          HStack{
              myMasterView()
                  .frame(width: geometry.size.width / 2, height: geometry.size.height)
                  .background(Color.yellow)
            VStack {
              myDetailView()
                .frame(width: geometry.size.width / 2, height: geometry.size.height*2/3)
                  .background(Color.orange)
              Text("Comment area")
              .frame(width: geometry.size.width / 2, height: geometry.size.height/3)
            }
          }
      }
  }
}

struct myMasterView: View {
  var body: some View {
      Text("Master View")
  }
}

struct myDetailView: View {
  var body: some View {
      Text("Detail View")
  }
}

Link for background file: background.png

could you add some code to show what you have tried? Here are the instructions on how to provide a minimal reproducible example: stackoverflow.com/help/minimal-reproducible-example — krjw
Thanks for the help. I wasn't sure where to start since I'm just learning, but I knew HStack and VStack wouldn't help. Since I need the relative placement of the buttons to be the same independent of whether the 11" iPad Pro is landscape or portrait, I didn't think .position would be useful (not to mention time consuming in trying to place the button) — Daniel Price
Thanks, but ZStack won't let me specifically place an object. I started looking at alignment grids, but again, still won't let me put a button exactly where I want... — Daniel Price
You can do that with .offset() but I would rather go for VStacks and HStacks in a ZStack — krjw

Daniel Price Daniel Price · Accepted Answer · 2020-07-14T20:00:33

I ended up making a powerpoint to help solve this problem. I put a grid over the image to determine a desired position. I used an offset based on the geometry:

geometry.size.width*0.10 moves the button 10% from the center

If the device was an iPad mini or in landscape, then I applied an additional scaling factor.

geometry.size.width*0.10*landscapeScaleFactor

I couldn't find a way to calculate the scale factor, so just found something acceptable through trial and error.

SwiftUI button position relative to background

1 Answers