如何使用SwiftUI使按钮可拖动/移动?

时间:2020-04-17 05:07:32

标签: swift xcode swift5.2 swiftui

我正在尝试使SwiftUI可以移动按钮。从看起来应该这样。我曾尝试将带有文本的Button放在另一个ZStack内,然后又工作了一秒钟,但是一旦我松开按钮,拖动就停止了,我再也无法拖动了。我注意到,尽管按钮已移动,但水龙头仍保留在中心。拖曳也看起来像马车。

 struct CircleButton: View {
@State private var dragAmount = CGSize.zero
var body: some View {
    ZStack {
        Button(action: performAction){
            ZStack {
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 100, height: 100)
                Text("Move me")
                    .foregroundColor(.white)
                    .font(.system(.caption, design: .serif))
            }
        }
        .animation(.default)
        .offset(self.dragAmount)
    }
    .gesture(
        DragGesture()
            .onChanged { self.dragAmount = $0.translation})
}

func performAction(){
    print("button pressed")
 }
}

我尝试过:

struct CircleButton: View {
@State private var dragAmount = CGSize.zero
var body: some View {
    ZStack {
        ZStack {
            Button(action: performAction){
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 100, height: 100)
            }
            Text("Tap me")
        }
        .offset(self.dragAmount)
        .animation(.default)
    }
    .gesture(
        DragGesture()
            .onChanged{ self.dragAmount = $0.translation})
}

func performAction(){
    print("button pressed")
 }
}

3 个答案:

答案 0 :(得分:4)

这里是可能方法的演示。经过测试并与Xcode 11.4 / iOS 13.4配合使用

demo

另请参见内联注释。

Collection_BSchema.aggregate([
  {
    $lookup: {
      from: "Collection_A",
      let: { refId: "$ref_id" },
      pipeline: [
        { $match: { $expr: { $eq: ["$ref_id", "$$refId"] } } },
        { $match: { features: { $elemMatch: { k: "foo", v: "bar" } } } },
      ],
      as: "Collection_A",
    },
  },
]);

答案 1 :(得分:1)

简单而又不同的东西

import SwiftUI

struct ContentView: View {
var body: some View {
    CircleButton()
}
}

struct CircleButton: View {

@State private var pos = CGPoint(x:222,y:222) // just for testing

var body: some View {
    theButton.position(self.pos).highPriorityGesture(self.drag)
}

var theButton: some View {
    ZStack {
        Circle()
            .foregroundColor(.blue)
            .frame(width: 100, height: 100)
            .onTapGesture { self.performAction() }
        Text("Tap me")
            .foregroundColor(.white)
            .font(.system(.caption, design: .serif))
    }
}

func performAction(){
    print("button pressed")
}

var drag: some Gesture {
    DragGesture().onChanged { value in self.pos = CGPoint(x: value.location.x, y: value.location.y)}
}
}

答案 2 :(得分:1)

我在ohayon找到了一个简单的解决方案。只是一个ViewModifier和一个扩展名:

struct DraggablePita: View {
  var body: some View {
    Image(uiImage: UIImage(named: "pita.png")!)
      .draggable() // Add the new, custom modifier to make this draggable
  }
}

// Handle dragging
struct DraggableView: ViewModifier {
  @State var offset = CGPoint(x: 0, y: 0)

  func body(content: Content) -> some View {
    content
      .gesture(DragGesture(minimumDistance: 0)
        .onChanged { value in
          self.offset.x += value.location.x - value.startLocation.x
          self.offset.y += value.location.y - value.startLocation.y
      })
      .offset(x: offset.x, y: offset.y)
  }
}

// Wrap `draggable()` in a View extension to have a clean call site
extension View {
  func draggable() -> some View {
    return modifier(DraggableView())
  }
}