如何使用 SwiftUI 使按钮可拖动/移动? [英] How to make a button draggable/movable with SwiftUI?

问题描述

我正在尝试使用 SwiftUI 制作一个可移动的按钮.从它看起来这应该工作.我曾尝试将带有文本的 Button 放入另一个 ZStack 中，并且它可以工作一秒钟，但是一旦我松开按钮，拖动就停止了，我无法再拖动了.我注意到尽管按钮移动了，但水龙头仍留在中心.拖动看起来也有问题.

I am trying to make a Button Movable with SwiftUI. From what it looks like this should work. I have tried putting the Button with Text inside another ZStack and for a second it was working but as soon as I released the button, the dragging stopped and I couldn't drag anymore. I noticed that the tap was remaining in the center despite the button had moved. Also the dragging looked buggy.

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

推荐答案

这里是可能的方法的演示.测试&适用于 Xcode 11.4/iOS 13.4

Here is a demo of possible approach. Tested & works with Xcode 11.4 / iOS 13.4

另见内嵌注释.

struct CircleButton: View {
    @State private var dragAmount: CGPoint?
    var body: some View {
        GeometryReader { gp in // just to center initial position
            ZStack {
                Button(action: self.performAction) {
                    ZStack {
                        Circle()
                            .foregroundColor(.blue)
                            .frame(width: 100, height: 100)
                        Text("Move me")
                            .foregroundColor(.white)
                            .font(.system(.caption, design: .serif))
                    }
                }
                .animation(.default)
                .position(self.dragAmount ?? CGPoint(x: gp.size.width / 2, y: gp.size.height / 2))
                .highPriorityGesture(  // << to do no action on drag !!
                    DragGesture()
                        .onChanged { self.dragAmount = $0.location})
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity) // full space
        }
    }

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

这篇关于如何使用 SwiftUI 使按钮可拖动/移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！