Question

在SwiftUI中，我试图制作一张地图，当用户单击其中一个站点时，将弹出信息表。

我打算在ZStack中使用该地图，但是如何将按钮放在停靠点的上方；如何定义按钮的位置，使其可以横向或纵向使用？

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

链接到后台文件：background.png

Answer 1

我最终制作了一个幻灯片以帮助解决此问题。我在图像上放了一个网格，以确定所需的位置。我使用了基于几何的偏移量：

geometry.size.width*0.10将按钮从中心移10％

如果该设备是iPad mini或横向设备，那么我会应用其他缩放因子。

geometry.size.width*0.10*landscapeScaleFactor

我找不到计算比例因子的方法，所以通过反复试验发现了可以接受的东西。

SwiftUI按钮相对于背景的位置

1 个答案: