首页 > 其他分享 >SwiftUI中的手势(TapGesture、LongPressGesture、GestureState的使用)

SwiftUI中的手势(TapGesture、LongPressGesture、GestureState的使用)

时间:2024-05-24 09:59:25浏览次数:19  
标签:LongPressGesture TapGesture GestureState 修饰符 点击 SwiftUI backgroundColor 手势

手势操作在App中可谓是用途非常广泛了,常规的手势修饰符有TapGesture点击手势、LongPressGesture长按手势、DragGesture拖拽手势,MagnificationGesture放缩手势和 RoationGesture旋转手势。
和常规的修饰符方法类似,只要将手势修饰符添加到视图中,系统就会自动识别用户的操作,并根据对应的手势交互执行相对应的指令。

本篇文章主要探索一下TapGesture点击手势、LongPressGesture长按手势。

TapGesture 点击手势

TapGesture点击手势是使用频率最高的手势之一,用于触发点击动作。有时候点击手势修饰符代替了常规的Button按钮.

struct TapGestureDemo: View {
  @State private var backgroundColor: Color = .black

  var body: some View {
    RoundedRectangle(cornerRadius: 25)
      .fill(backgroundColor)
      .frame(width: 300, height: 200)
      .onTapGesture {
        backgroundColor = .red
      }
  }
}

添加点击手势直接在要点击的视图上加上.onTapGesture修饰符即可,上面代码点击矩形后改变其自身的背景色。
默认是点击一下就生效,当然也可以设置连续点击几次才生效,比如:

.onTapGesture(count: 2, perform: {
   backgroundColor = .red
})

.onTapGesture修饰符中传入count参数即可,上面代码中,需要连续点击两下才生效。

SwiftUI还提供了.gesture手势修饰符来进行手势识别,如下:

struct TapGestureDemo: View {
  @State private var backgroundColor: Color = .black

  var body: some View {
    RoundedRectangle(cornerRadius: 25)
      .fill(backgroundColor)
      .frame(width: 300, height: 200)
      .gesture(
        TapGesture()
          .onEnded({
            backgroundColor = .red
          })
      )
  }
}

TapGesture()添加到.gesture修饰符的闭包中,点击结束后执行.onEnded闭包中的逻辑。这个.onEnded修饰符是用来修TapGesture势的。

LongPressGesture 长按手势

LongPressGestureTapGesture手势多了一个长按的操作,也就是点击后不是立即抬起,需要按住一段时间才会响应的手势。

长按手势的修饰符为:.onLongPressGesture
代码如下:

struct LongPressGesture: View {

  @State private var backgroundColor: Color = .black

  var body: some View {
    RoundedRectangle(cornerRadius: 25)
      .fill(backgroundColor)
      .frame(width: 300, height: 200)
      .onLongPressGesture {
        backgroundColor = .red
      }
  }
}

还是上面的代码,长按后改变矩形的背景色。

.onLongPressGestue修饰符有几个参数:
minimumDuration:最短按住多久就响应事件。默认的长按时间是0.5秒。

.onLongPressGesture(minimumDuration: 2) {
   ......
}

maximumDistance: 最长移动距离,按住后手指移动超过这个距离,且未到响应时间,则终止长按手势的响应事件。也就是相当于撤销了这次长按,比如用户误操作了,立即将手移走。默认值为10.

.onLongPressGesture(maximumDistance: 30) {
    ......
}

LongPressGestue长按手势同样可以放到.gesture修饰符的闭包中使用,并且给LongPressGestue添加.onEnded修饰符实现长按事件,同时还可以添加.onChanged修饰符,具体如下:

.gesture(
  LongPressGesture(minimumDuration: 2)
    .onChanged({ state in
      print("---> onChanged state: \(state)")
    })
    .onEnded({ state in
      print("---> onEnded state: \(state)")
    })
)

.onChanged修饰符在刚按住的时候触发,闭包内返回一个bool类型的参数,经测试返回true
.onEnded修饰符在达到minimumDuration时间时触发,闭包内返回一个bool类型的参数,经测试返回true

除了这两个外,还可以添加一个.updating修饰符。

struct LongPressGestureDemo: View {
  @GestureState private var isLongPressing = false

  var body: some View {
    Circle()
      .fill(Color.blue)
      .frame(width: 100, height: 100)
      .gesture(
        LongPressGesture()
          .updating($isLongPressing, body: { value, state, _ in
            state = value
          })
      )
      .scaleEffect(isLongPressing ? 1.5 : 1.0)
  }
}

.updating修饰符是一个更新方法,它需要绑定一个被@GestureState修饰的变量,在长按的过程中,这个变量将会被赋值。

@GestureState修饰的变量记录了手势状态的变化,并且在每次手势动画结束后,变量的值将会重置到初始状态。

.updatingbody闭包中有3个参数:

  • 第一个参数:长按手势更新后的状态,即最新的状态值。
  • 第二个参数:长按手势前一个状态,即上一次的状态值。
  • 第三个参数:长按手势的上下文,基本用不到。

上面代码中我们将第一个参数赋值给第二个参数,也就是用最新的状态更新之前的状态,继而改变了绑定的变量的值。也就是说@GestureState修饰的变量记录了第二个参数的值。

.updating修饰符在LongPressGesture上用处基本上是体现不出来,在DragGesture中体现的还是比较明显的。

写在最后

本篇文章主要介绍了TapGestureLongPressGestue,以及@GestureState属性包装器的概念的等等,文章内容比较简单。

最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。

标签:LongPressGesture,TapGesture,GestureState,修饰符,点击,SwiftUI,backgroundColor,手势
From: https://blog.csdn.net/guoyongming925/article/details/139123565

相关文章

  • SwiftUI中的手势(DragGesture拖拽手势及Drag动画组件)
    上一篇文章我们了解了如何使用.gesture修饰符和@GestureState属性包装器,让我们看看另一种常见的手势:DragGesture拖拽手势。下面先看个效果图:这个效果中,我们实现了一个Text文本,并添加了拖拽手势,可以拖动到屏幕的任意位置,松手后停留在目标位置,而非回到原来的起点位置。UI......
  • SwiftUI State,Binding 状态管理
    代码////ContentView.swift//SwiftUIState////CreatedbyCHENHaoon2024/5/8.//importSwiftUIstructContentView:View{@StateprivatevarisPlaying=false@StateprivatevarclickNumber1=0@StateprivatevarclickNumber2=0......
  • DevTutor 一款旨在帮助开发者使用 SwiftUI 创建出色应用程序的应用
    提供可复制的代码示例和相应的用户界面预览,以简化您的编码过程。此外,还包括了《Swift编程语言》官方中英文文档的本地离线预览。主要功能■提供可直接在您的项目中使用的样本代码■实时查看您的代码如何影响应用的外观■提供官方中英文Swift编程语言离线文档■探索第......
  • SwiftUI ScrollView 滚动视图
    代码////ContentView.swift//SwiftUIScrollView////CreatedbyCHENHaoon2024/5/7.//importSwiftUIstructContentView:View{varbody:someView{VStack(alignment:.leading){VStack(alignment:.leading){......
  • SwiftUI ZStack、HStack、VStack 布局
    代码////ContentView.swift//SwiftUIStacks////CreatedbyCHENHaoon2024/5/6.//importSwiftUIstructContentView:View{varbody:someView{VStack(spacing:15){HeaderView()HStack(spacing:15){......
  • SwiftUI Image 图片处理
    代码片段////ContentView.swift//SwiftUIImage////CreatedbyCHENHaoon2024/5/6.//importSwiftUIstructContentView:View{varbody:someView{Image("paris").resizable()//延伸模式,平铺整个屏幕/......
  • SwiftUI Text 文字处理
    代码////ContentView.swift//SwiftUIText////CreatedbyCHENHaoon2024/5/6.//importSwiftUIstructContentView:View{varbody:someView{VStack{Text("Yourtimeislimited,sodon’twasteitlivingsomeoneels......
  • # 在 SwiftUI 中使用 Metal Shader
    简介从iOS17/macOS14开始,SwiftUI支持使用Metalshader来实现一些特效。主要提供三个ViewModifier:colorEffect、distortionEffect和layerEffect。每个modifier的第一个参数是传入的Shader实例。此外,View实例还新增了一个visualEffectmodifier,用于暴露修饰内......
  • 大师学SwiftUI第6章 - 声明式用户界面 Part 4
    步进器视图Stepper视图创建一个带递增和递减按钮的控件。该结构体提供了多个初始化方法,包含不同的配置参数组合。以下是最常用的一部分。Stepper(String,value:Binding,in:Range,step:Float,onEditingChanged:Closure):此初始化方法创建一个Stepper视图。第一个参数定义标签......
  • 大师学SwiftUI第6章 - 声明式用户界面 Part 3
    安全域视图SwiftUI还内置了创建安全文本框的视图。这一视图会把用户输入的字符替换成点以及隐藏敏感信息,比如密码。SecureField(String,text:Binding):该初始化方法创建一个安全输入框。第一个参数定义占位文本,text参数为存储用户插入值的绑定属性。实现方式与TextField视图相同,我......