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


目录
相关文章
|
存储 iOS开发
SwiftUI极简教程17:Gestures手势的使用
SwiftUI极简教程17:Gestures手势的使用
1019 0
SwiftUI极简教程17:Gestures手势的使用
|
算法 Windows
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
在一般能搜到的所有实现圆角窗体的示例中,都有着惨不忍睹的锯齿...而借助于Layered Windows,是可以实现丝滑无锯齿效果的Form窗体的,其具体原理就是分层窗体....
1752 0
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
SwiftUI—如何给图像视图添加遮罩以突出主题
SwiftUI—如何给图像视图添加遮罩以突出主题
686 0
SwiftUI—如何给图像视图添加遮罩以突出主题
|
API Android开发 开发者
Gestures(手势)
如果你的手机是Android 4.x的原生Android系统的话,你可能可以在你的手机或者平板上看到谷歌提供的一个Gesture Builder的APP,该应用允许用户以类似于涂鸦的方式绘制一个手写符号,使之对应一个字符串名称!当然,没有这样的手机也没关系,我们有模拟器嘛,自己开个4.0的系统试试就知道了,另外,我们可以到\mmt\sdcard\gestures获取到保存手势的文件!好了,唠唠叨叨那么多,开始讲正题吧!
128 0
|
存储 Swift
SwiftUI极简教程38:ScrollViewReader滚动视图锚点的使用
在本章中,你将学会ScrollViewReader滚动视图锚点的使用。
841 0
SwiftUI极简教程38:ScrollViewReader滚动视图锚点的使用
SwiftUI—如何给视图添加旋转手势
SwiftUI—如何给视图添加旋转手势
371 0
SwiftUI—如何给视图添加双击手势
SwiftUI—如何给视图添加双击手势
350 0
SwiftUI—如何使一个视图同时支持多种的手势
SwiftUI—如何使一个视图同时支持多种的手势
274 0
SwiftUI—如何给视图添加单击手势
SwiftUI—如何给视图添加单击手势
273 0
SwiftUI—如何给视图添加单击手势
|
iOS开发
拖动手势UIPanGestureRecognizer
拖动手势UIPanGestureRecognizer
344 0
拖动手势UIPanGestureRecognizer