如何使用 SwiftUI 在一个滑动手势中激活多个按钮？

Question

对于这样的游戏，我有 25 个按网格排列的按钮。

我正在像这样生成这些按钮：

VStack {
  ForEach(1..<6) {_ in
    HStack {
      ForEach(1..<6) {_ in
        Button(action: {
          // Button clicked
          doButton()
        }) {
          Rectangle()
            .frame(width: 50, height: 50)
            .border(Color.black, lineWidth: 1)
        }
      }
    }
  }
}

如果用户在多个按钮上拖动手指，每个按钮都被单击，并且 doButton() 被执行，我该如何做到这一点？

我尝试使用 DragGesture() 但无法让它工作......

Answer 1

Swift 5.1，iOS 13。

我没有 100% 的解决方案给你，但我确实有一些东西可以让你有希望地起步。 这些不是按钮，而只是正方形。 当我单击/拖动它们时，它们会发出我经过的信号。

它并不完美，但应该给你更多的东西。 我在媒体上阅读了有关使用拖放进行类似操作的教程。 这个。

可以帮助但认为您需要在此处和几何阅读器中进行拖动，最终检测它们的位置并做出响应。

import SwiftUI

struct ContentView: View {
var body: some View {
 return VStack {
  ForEach(1..<6) {colY in
    HStack {
      ForEach(1..<6) {rowX in
          boxView(row: rowX, col: colY)
        }
      }
    }
  }
}
}

struct boxView: View {
 @State var row: Int
 @State var col: Int
 var body: some View {
 let dragGesture = DragGesture(minimumDistance: 0, coordinateSpace: CoordinateSpace.global)
  .onChanged { (value) in
    print("trigger ",self.row,self.col)
  }
 return Rectangle()
    .stroke(Color.black)
    .frame(width: 50, height: 50)
    .gesture(dragGesture)
  }
}

Answer 2

import SwiftUI

class Container : ObservableObject {
    @Published var location = CGPoint()
    public func updateLocation(_ location: CGPoint) {
        self.location = location
    }
}

struct SliderGestureButtonsView: View {
    @ObservedObject var container = Container()
    var body: some View {
        VStack(alignment: .center, spacing: 0) {
            ForEach(1..<6) { colY in
                HStack {
                    ForEach(1..<6) { rowX in
                        GeometryReader { gp in
                            let x = gp.frame(in:.named("hive")).midX
                            let y = gp.frame(in:.named("hive")).midY
                            let w = gp.frame(in:.named("hive")).size.width
                            let h = gp.frame(in:.named("hive")).size.height
                            let rect = CGRect(x: x, y: y, width: w, height: h)
                            boxView(row: rowX, col: colY, rect: rect, container: container)
                        }
                    }
                }.frame(height: 60)
            }
        }.coordinateSpace(name: "hive").frame(width: 300)
        .gesture(
            DragGesture(minimumDistance: 0, coordinateSpace: CoordinateSpace.named("hive"))
            .onChanged { (value) in
                container.updateLocation(value.location)
            }
        )
    }
}


struct boxView: View {
    var row: Int
    var col: Int
    var rect: CGRect
    @ObservedObject var container: Container
    var body: some View {
        let x = container.location.x
        let y = container.location.y
        
        let hw = rect.size.width / 2
        let ox = rect.origin.x
        let withinX = x > ox - hw && x < ox + hw
        
        let hh = rect.size.height / 2
        let oy = rect.origin.y
        let withinY = y > oy - hh && y < oy + hh
        
        var pressed = false

        if(withinX && withinY) {
            pressed = true
            print("trigger ", self.row, self.col)
        }

        return Rectangle()
                .stroke(Color.white)
                .frame(width: 60, height: 60)
                .background(pressed ? Color.green : Color.black)
    }
}