首页 > 解决方案 > SwiftUI 中“触摸输入”的手势

问题描述

我正在使用VStack. 当用户点击这些视图之一时,它会突出显示。为了让高光在触地时显示,而不是在触地释放时显示,我使用DragGestureminimumDistance值为 的a 0

private func highlightGesture(_ i: Int) -> some Gesture {
  DragGesture(minimumDistance: 0.0)
    .onChanged { _ in highlight = i }
    .onEnded { _ in highlight = nil }
}

但是,我希望在用户的拖动手势进入另一个视图时更新突出显示。例如,如果我点击并突出显示第一个视图,然后将手指移到第二个视图而不将其从屏幕上移开,它应该突出显示第二个视图。

使用上面显示的手势,只有在点击视图时才会突出显示视图。相反,我希望在点击触摸进入视图时突出显示视图。

任何帮助是极大的赞赏。

标签: swiftswiftui

解决方案


这是一个简单的示例,它显示了一种可能的方式,即在 2 个视图/图像上拖动手指并在进入不同的视图/图像时突出显示它们。你将不得不做更多的工作。希望能帮助到你。

struct ContentView: View {

class ImgObj: ObservableObject {
    @Published var img1Rec: CGRect = CGRect.zero
    @Published var img2Rec: CGRect = CGRect.zero
    @Published var img1Color: Color = .black
    @Published var img2Color: Color = .black
}

@ObservedObject var imgObj = ImgObj()
@GestureState var dragVar = CGSize.zero

var body: some View {
    
    let dragger = DragGesture(minimumDistance: 0.0, coordinateSpace: .global)
        .updating($dragVar, body: { (value, _, _) in
            imgObj.img1Color = imgObj.img1Rec.contains(value.location) ? .red : .black
            imgObj.img2Color = imgObj.img2Rec.contains(value.location) ? .red : .black
        })
    
    GeometryReader { geometry in
        VStack {
            Image(systemName: "clock").resizable().frame(width: 222, height: 222)
                .foregroundColor(imgObj.img1Color)
                .gesture(dragger)
                .onAppear {
                    // use geometry.frame(in: .global) somehow to get the CGRect
                    imgObj.img1Rec = CGRect(x: 0, y: 0, width: 222, height: 222)
                }
            Image(systemName: "folder").resizable().frame(width: 222, height: 222)
                .foregroundColor(imgObj.img2Color)
                .gesture(dragger)
                .onAppear {
                    // use geometry.frame(in: .global) somehow to get the CGRect
                    imgObj.img2Rec = CGRect(x: 0, y: 222, width: 222, height: 222)
                }
        }
    }
}
}

编辑说明:

代替:

            .onAppear {
                // use geometry.frame(in: .global) somehow to get the CGRect
                imgObj.img1Rec = CGRect(x: 0, y: 222, width: 222, height: 222)
            }
            

你可以使用:

                 .background(
                    GeometryReader { proxy in
                        Color.clear
                            .onAppear {
                                imgObj.img1Rec = proxy.frame(in: .global)
                            }
                    })
                    

推荐阅读