1. LongPressGesture 长按操作
1.1 实现
/// 长按事件
struct LongPressGestureBootcamp: View {
@State var isComplete: Bool = false
@State var isSuccess : Bool = false
var body: some View {
// content1
content2
}
// 方式二
var content2: some View{
VStack {
Rectangle()
.fill(isSuccess ? Color.green : Color.blue)
.frame(maxWidth: isComplete ? .infinity : 0)
.frame(height: 55)
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.gray)
HStack {
Text("Click Here")
.foregroundColor(.white)
.padding()
.background(Color.black)
.cornerRadius(10)
.onLongPressGesture(minimumDuration: 1.0, maximumDistance: 50) { isPressing in
// 开始点击 -> 最短的持续时间
if isPressing {
withAnimation(.easeInOut(duration: 1.0)){
isComplete = true
}
}else{
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
if !isSuccess{
withAnimation(.easeInOut){
isComplete = false
}
}
}
}
print("isPressing: %@", isPressing)
} perform: {
// 设置长按时间结束,才执行
withAnimation(.easeInOut){
isSuccess = true;
print("isSuccess: %@", isSuccess)
}
}
Text("Reset")
.foregroundColor(.white)
.padding()
.background(Color.black)
.cornerRadius(10)
.onTapGesture {
isComplete = false
isSuccess = false
}
}
}
}
// 方式一
var content1: some View{
VStack {
Text(isComplete ? "COMPLETED" : "NOT COMPLETED")
.padding()
.padding(.horizontal)
.background(isComplete ? Color.green : Color.gray)
.cornerRadius(10)
//.onTapGesture {
// isComplete.toggle()
//}
// maximumDistance 最大的移动距离
.onLongPressGesture(minimumDuration: 3.0, maximumDistance: 50) {
isComplete.toggle()
}
}
}
}
1.2 效果图:
2. MagnificationGesture 缩放手势操作
2.1 实现
/// 缩放手势操作
struct MagnificationGestureBootcamp: View {
@State var currentAmount: CGFloat = 0
@State var lastAmount: CGFloat = 0
// 模拟器得到双指操作快捷键(手势应在 View 内): Ctrl + Alt + 鼠标
var body: some View {
//magnificationGesture1
magnificationGesture2
}
/// 方式二
var magnificationGesture2:some View{
VStack(spacing: 10){
HStack{
Circle().frame(width: 35, height: 35)
Text("Swiftful Thinking")
Spacer()
Image(systemName: "ellipsis")
}
.padding(.horizontal)
Rectangle()
.frame(height: 300)
.scaleEffect(1 + currentAmount)
.gesture(
MagnificationGesture()
.onChanged{ value in
currentAmount = value - 1
}
.onEnded{ value in
//lastAmount += currentAmount
withAnimation(.spring()){
currentAmount = 0
}
}
)
HStack {
Image(systemName: "heart.fill")
Image(systemName: "text.bubble.fill")
Spacer()
}
.padding(.horizontal)
.font(.headline)
Text("This is the caption for my photo!")
.frame(maxWidth: .infinity,alignment: .leading)
.padding(.horizontal)
}
}
/// 方式一
var magnificationGesture1: some View{
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
.font(.title)
.padding(40)
.background(Color.red.cornerRadius(10))
.scaleEffect(1 + currentAmount + lastAmount)
// 手势
.gesture(
// 放大手势
MagnificationGesture()
.onChanged{ value in
currentAmount = value - 1
}
.onEnded{ value in
lastAmount += currentAmount
currentAmount = 0;
}
)
}
}
2.2 效果图:
3. RotationGesture 旋转操作
3.1 实现
/// 旋转操作
struct RotationGestureBootcamp: View {
// 角度
@State var angle: Angle = Angle(degrees: 0)
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(.white)
.padding(50)
.background(Color.blue.cornerRadius(10))
.rotationEffect(angle)
.gesture(
RotationGesture()
.onChanged{ value in
angle = value
}
.onEnded{ value in
withAnimation(.spring()){
angle = Angle(degrees: 0)
}
}
)
}
}
3.2 效果图: