SwiftUI 中“触摸输入”的手势

Posted 2023-02-25

【中文标题】SwiftUI 中“触摸输入”的手势

【英文标题】：Gesture for "touch enters" in SwiftUI

【发布时间】：2021-04-24 02:59:13

【问题描述】：

我正在使用VStack 显示一系列循环视图。当用户点击这些视图之一时，它会突出显示。为了让高光在触地时显示，而不是在触地释放时显示，我使用了 DragGesture 和 minimumDistance 值为 0：

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

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

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

非常感谢任何帮助。

【参考方案1】：

这是一个简单的例子，展示了一种拖动手指的可能方式 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)
                            
                    )
                    

【讨论】：

谢谢！我试试看。