SwiftUI—如何给视图添加拖动手势

简介: SwiftUI—如何给视图添加拖动手势

本节课演示使用拖动手势实现拖放操作,拖放操作经常用于游戏类的应用。


示例代码:


struct ContentView : View {
    @State var offset: CGSize = .zero //表示视图被拖动的距离
    var body: some View {
        let dragGesture = DragGesture() //初始化一个拖动手势,该手势一旦识别到手指拖动的触摸事件,就会调用手势的状态变化事件
            .onChanged { (value) in
                print(value.startLocation, value.location, value.translation)
                self.offset = value.translation
            }
            .onEnded { (value) in
                if(abs(value.translation.width) >= 40 || abs(value.translation.height - (-260)) >= 40){ //如果被拖动的视图,距离目标视图的位置较远,则返回原来的位置
                    self.offset = .zero
                }
                else{ //如果被拖动的视图,距离目标视图的位置较近,则将被拖动的视图,放置在目标视图的位置
                    self.offset = CGSize(width: 0, height: -260)
                }
            }
        return VStack{
            Circle()
                .fill(Color.black)
                .opacity(0.1)
                .frame(width: 200, height: 200)
                .offset(CGSize(width: 0, height: -50))
            Circle()
                .fill(Color.orange)
                .frame(width: 200, height: 200)
                .offset(offset)
                .gesture(dragGesture)
                .animation(.spring())
        }
    }
}


2466108-3ce0ca2ba038fcb8.gif


目录
相关文章
SwiftUI—如何给图像视图添加遮罩以突出主题
SwiftUI—如何给图像视图添加遮罩以突出主题
702 0
SwiftUI—如何给图像视图添加遮罩以突出主题
Avalonia 实现平滑拖动指定控件
Avalonia 实现平滑拖动指定控件
250 0
|
存储 Swift
SwiftUI极简教程38:ScrollViewReader滚动视图锚点的使用
在本章中,你将学会ScrollViewReader滚动视图锚点的使用。
857 0
SwiftUI极简教程38:ScrollViewReader滚动视图锚点的使用
SwiftUI—如何给视图添加旋转手势
SwiftUI—如何给视图添加旋转手势
383 0
SwiftUI—如何给视图添加双击手势
SwiftUI—如何给视图添加双击手势
357 0
SwiftUI—如何给视图添加单击手势
SwiftUI—如何给视图添加单击手势
278 0
SwiftUI—如何给视图添加单击手势
SwiftUI—如何使一个视图同时支持多种的手势
SwiftUI—如何使一个视图同时支持多种的手势
289 0
|
iOS开发
拖动手势UIPanGestureRecognizer
拖动手势UIPanGestureRecognizer
358 0
拖动手势UIPanGestureRecognizer
|
定位技术
SwiftUI—使用MapKit里的地图视图
SwiftUI—使用MapKit里的地图视图
475 0
SwiftUI—使用MapKit里的地图视图
SwiftUI—如何在PreviewProvider中使用导航视图
SwiftUI—如何在PreviewProvider中使用导航视图
416 0
SwiftUI—如何在PreviewProvider中使用导航视图