如何在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()但无法实现...

- wlucas30

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

- user3069232

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

- Mike Lee