CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này khám phá các cử chỉ cơ bản của SwiftUI, được tác giả thu thập và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Lời nói đầu

  .

Trong SwiftUI, chúng ta có thể làm cho ứng dụng của mình tương tác hơn bằng cách thêm các tương tác khác nhau để phản hồi các thao tác chạm, nhấp và vuốt của chúng ta.

Hôm nay, chúng ta sẽ xem xét các cử chỉ cơ bản của SwiftUI:

• ChạmGesture
• Cử chỉ nhấn lâu
• Cử chỉ kéo
• Cử chỉ phóng đại
• Cử chỉ xoay

ChạmGesture

  .

Cử chỉ chạm cho phép chúng ta nhận ra một hoặc nhiều lần chạm trên một Chế độ xem. Chúng tôi có nhiều cách để thêm cử chỉ chạm.

Đầu tiên là sử dụng trực tiếp trình sửa đổi .onTapGesture.

1. Vòng tròn() 
2.   .onTapGesture { 
3.     // Trả lời ĐẾN Chạm vào cử chỉ  
4.   } 

Tùy chọn khác được sử dụng trong tài liệu SwiftUI là tạo cử chỉ và cấu hình nó như một thuộc tính, sau đó sử dụng nó với trình sửa đổi .gesture(_:include:).

Lưu ý: Để thực hiện một hành động hoặc phản hồi thao tác chạm, chúng ta cần đóng bằng hành động .onEnded, hành động này sẽ được kích hoạt khi cử chỉ kết thúc.

1. cấu trúc SingleTapGestureView: Xem { 
2.   biến singleTap: một số Cử chỉ { 
3.       ChạmGesture() 
4.           . đã kết thúc { _ TRONG 
5.               // Trả lời ĐẾN Chạm vào cử chỉ 
6.           } 
7.   } 
8.  
9.   thân biến: một số Xem { 
10.       Vòng tròn() 
11.           .cử chỉ(một lần chạm) 
12.   } 
13. } 

Trên thực tế, tôi thích cách tiếp cận thứ hai hơn vì theo cách này, chúng ta có thể tạo ra nhiều cử chỉ khác nhau và sử dụng lại chúng thông qua mã của mình.

Vì vậy, nếu chúng ta ghép mã lại với nhau, chúng ta có thể bắt đầu viết một cái gì đó như thế này.

1. cấu trúc TapGestureView: Xem { 
2.     @State private var isAnimating = SAI 
3.     @State private var tapped1x = 0 
4.  
5.     biến singleTap: một số Cử chỉ { 
6.         ChạmGesture() 
7.             . đã kết thúc { _ TRONG 
8.                 đã khai thác1x += 1 
9.  
10.                 withAnimation(Animation.easeOut(thời lượng: 0,5)) { 
11.                     self.isAnimating = ĐÚNG VẬY 
12.                 } 
13.  
14.                 DispatchQueue.main.asyncAfter(hạn chót: .now() + 0,5) { 
15.                     self.isAnimating = SAI 
16.                 } 
17.             } 
18.     } 
19.  
20.     thân biến: một số Xem { 
21.         VStack { 
22.             Chữ("Đã nhấn 1X: \(đã nhấn 1x) lần") 
23.                 .font(.caption) 
24.  
25.             Vòng tròn() 
26.                 .frame(chiều rộng: 80, chiều cao: 80) 
27.                 .foregroundColor(.cam) 
28.                 . lớp phủ( 
29.                     Chữ("1X") 
30.                         .fontWeight(.trung bình) 
31.                 ) 
32.                 .lý lịch( 
33.                     Vòng tròn() 
34.                         .strokeBorder(Màu.xanh lam, chiều rộng dòng: 3) 
35.                         .scaleEffect(làHoạthình? 1.5 : 1) 
36.                         .opacity(làHoạt ảnh? 0 : 1) 
37.                 ) 
38.                 .cử chỉ(một lần chạm) 
39.         } 
40.     } 
41. } 

Tương tự như vậy, chúng ta có thể kiểm soát số lần chạm để phản hồi chỉ bằng cách sử dụng trình khởi tạo TapGesture(count: Int).

Trong trường hợp này, bạn cần nhấp 3 lần để kích hoạt hành động .onEnded để đóng.

1. cấu trúc TapGesture3xView: Xem { 
2.     @State private var isAnimating = SAI 
3.     @State private var tapped3x = 0 
4.  
5.     var multipleTap: một số Cử chỉ { 
6.         ChạmGestuređếm: 3) 
7.             . đã kết thúc { _ TRONG 
8.                 đã khai thác 3x += 1 
9.  
10.                 withAnimation(Animation.easeOut(thời lượng: 0,5)) { 
11.                     self.isAnimating = ĐÚNG VẬY 
12.                 } 
13.  
14.                 DispatchQueue.main.asyncAfter(hạn chót: .now() + 0,5) { 
15.                     self.isAnimating = SAI 
16.                 } 
17.             } 
18.     } 
19.  
20.     thân biến: một số Xem { 
21.         VStack { 
22.             Chữ("Đã nhấn 3 lần: \(đã nhấn 3 lần)") 
23.                 .font(.caption) 
24.  
25.             Vòng tròn() 
26.                 .frame(chiều rộng: 80, chiều cao: 80) 
27.                 .foregroundColor(.cam) 
28.                 . lớp phủ( 
29.                     Chữ("3X") 
30.                         .fontWeight(.trung bình) 
31.                 ) 
32.                 .lý lịch( 
33.                     Vòng tròn() 
34.                         .strokeBorder(Màu.xanh lam, chiều rộng dòng: 3) 
35.                         .scaleEffect(làHoạthình? 1.5 : 1) 
36.                         .opacity(làHoạt ảnh? 0 : 1) 
37.                 ) 
38.                 .cử chỉ(nhiều lần chạm) 
39.         } 
40.     } 
41. } 

Cử chỉ nhấn lâu

  .

Cử chỉ nhấn lâu cho phép chúng ta thực hiện một hành động sau khi người dùng nhấn lâu trong một khoảng thời gian xác định và trong suốt thời gian người dùng nhấn lâu.

Chúng ta có thể thiết lập thời lượng tối thiểu để cử chỉ nhấn và giữ của mình được nhận dạng. Bạn có thể thiết lập tính năng này trong trình khởi tạo LongPressGesture.

1. LongPressGesture(thời gian tối thiểu: 2) 

Sau đó, chúng ta có thể sử dụng phương thức .updating để thực hiện các hành động khi nhấn và giữ, và .onEnded để thực hiện các hành động khi cử chỉ của chúng ta được nhận dạng.

Trong ví dụ này, tôi sẽ cập nhật kích thước và màu sắc của Circle() trong khi nhấn và giữ thao tác, và khi cử chỉ được nhận dạng, tôi sẽ hiển thị "Văn bản đã hoàn tất".

Ngoài ra, tôi đang sử dụng trình bao bọc thuộc tính GestureState được đặt thành true khi nhấn và giữ và thành false khi cử chỉ kết thúc. Tôi đang sử dụng trình bao bọc thuộc tính này cho một hình ảnh động mẫu.

1. cấu trúc LongPressGestureView: Xem { 
2.     @GestureState biến riêng tư isLongPressDetected = SAI 
3.     @State private var isDone = SAI 
4.  
5.     var longPress: một số Cử chỉ { 
6.         LongPressGesture(thời gian tối thiểu: 2) 
7.             .updating($isLongPressDetected) { trạng thái hiện tại, trạng thái cử chỉ, giao dịch TRONG 
8.                 DispatchQueue.main.async { 
9.                     đã xong = SAI 
10.                 } 
11.                 gestureState = trạng thái hiện tại 
12.                 giao dịch.animation = Animation.easeIn(thời lượng: 2) 
13.             } 
14.             .onEnded { xong TRONG 
15.                 isDone = đã xong 
16.             } 
17.     } 
18.  
19.     thân biến: một số Xem { 
20.         VStack { 
21.             Khoảng cách() 
22.  
23.             Vòng tròn() 
24.                 .frame(chiều rộng: 10, chiều cao: 10) 
25.                 .foregroundColor(isLongPressDetected ? .orange : .sơ đẳng) 
26.                 .scaleEffect(Kích thước CGS( 
27.                                 chiều rộng: isLongPressDetected ? 10 : 1, 
28.                                 chiều cao: isLongPressDetected ? 10 : 1)) 
29.  
30.             Khoảng cách() 
31.             nếu isLongPressDetected { 
32.                 Chữ("Đang cập nhật...") 
33.             } 
34.  
35.             nếu isDone { 
36.                 Chữ("Xong") 
37.             } 
38.  
39.             Khoảng cách() 
40.  
41.             Chữ("Nhấn và giữ 2 giây") 
42.                 .đệm() 
43.                 .background(isLongPressDetected ? Color.green : Color.orange) 
44.                 .Bán kính góc(16) 
45.                 .cử chỉ(nhấn lâu) 
46.         } 
47.     } 
48. } 

 Cử chỉ kéo

  .

Cử chỉ kéo cho phép chúng ta thực hiện các hành động trong khi kéo chế độ xem.

Chúng ta có thể tận dụng và sử dụng các phương thức tắt .onChanged và .onEnded để thực hiện một số hành động. Cả hai phương pháp đều cung cấp cho chúng ta thuộc tính tuyệt vời DragGesture.Value, lưu trữ thông tin cử chỉ kéo sau:

vị trí .

dự đoánEndLocation .

dự đoánEndTranslation .

bắt đầuVị trí .

thời gian .

bản dịch.

Chúng ta có thể sử dụng thuộc tính này để tạo chế độ xem có thể di chuyển. Trong ví dụ hiện tại, tôi sử dụng phương thức .onChanged để cập nhật tọa độ vị trí Circle().

1. cấu trúc DragGestureView: Xem { 
2.     @State private var location: CGPoint = CGPoint(x: 100, y: 100) 
3.  
4.     kéo var: một số Cử chỉ { 
5.         DragGesture(khoảng cách tối thiểu: 1, tọa độKhông gian: .địa phương) 
6.             .onChanged { giá trị TRONG 
7.                 vị trí = giá trị.vị trí 
8.             } 
9.     } 
10.  
11.     thân biến: một số Xem { 
12.         Vòng tròn() 
13.             .frame(chiều rộng: 100, chiều cao: 100) 
14.             .foregroundColor(.cam) 
15.             .vị trí(vị trí) 
16.             .cử chỉ(kéo) 
17.     } 
18. } 

Tại đây, phương thức .onEnded được thêm vào để thiết lập lại tọa độ vị trí Circle() sau khi quá trình kéo kết thúc.

1. cấu trúc DragGestureView: Xem { 
2.     @State private var location: CGPoint = CGPoint(x: 100, y: 100) 
3.  
4.     kéo var: một số Cử chỉ { 
5.         DragGesture(khoảng cách tối thiểu: 1, tọa độKhông gian: .địa phương) 
6.             .onChanged { giá trị TRONG 
7.                 vị trí = giá trị.vị trí 
8.             } 
9.             .onEnded { giá trị TRONG 
10.                 vớiAnimation(.easeOut) { 
11.                     vị trí = CGPoint(x: 100, y: 100) 
12.                 } 
13.             } 
14.     } 
15.  
16.     thân biến: một số Xem { 
17.         Vòng tròn() 
18.             .frame(chiều rộng: 100, chiều cao: 100) 
19.             .foregroundColor(.cam) 
20.             .vị trí(vị trí) 
21.             .cử chỉ(kéo) 
22.     } 
23. } 

Cử chỉ phóng đại

  .

Khi chúng ta áp dụng thao tác phóng đại trên Chế độ xem, cử chỉ phóng đại cho phép thực hiện một số thao tác.

Ở đây, chúng ta cũng có các closure .onChanged và .onEnded mà chúng ta có thể sử dụng để phản hồi trong hoặc khi kết thúc hành động thu phóng. Với tư cách là một thuộc tính, nó nhận được MagnificationGesture.Value của CGFloat. Chúng ta có thể sử dụng ví dụ này để thay đổi kích thước chế độ xem.

1. cấu trúc MagnificationGestureView: Xem { 
2.     @State var magnifiedValue: CGFloat = 1.0 
3.  
4.     độ phóng đại var: một số Cử chỉ { 
5.         Phóng đạiGesture() 
6.             .onChanged { giá trị TRONG 
7.                 magnifiedValue = giá trị 
8.             } 
9.             .onEnded { giá trị TRONG 
10.                 Giá trị phóng đại = 1.0 
11.             } 
12.     } 
13.  
14.     thân biến: một số Xem { 
15.         Vòng tròn() 
16.             .frame(chiều rộng: 100 * magnifiedValue, chiều cao: 100 * magnifiedValue) 
17.             .foregroundColor(.cam) 
18.             .cử chỉ(phóng to) 
19.             .hoạt hình(.easeOut) 
20.     } 
21. } 

Cử chỉ xoay

  .

Cử chỉ xoay cho phép xoay chế độ xem và phản hồi bằng một số hành động trong và khi kết thúc quá trình xoay.

Nó cũng cung cấp cho chúng ta các closure .onChanged và .onEnded, cung cấp cho chúng ta RotationGesture.Value, biểu diễn giá trị Góc cử chỉ. Chúng ta có thể sử dụng giá trị này để xoay chế độ xem.

1. cấu trúc RotationGestureView: Xem { 
2.     @State private var angle = Góc (độ: 0,0) 
3.     @State private var backgroundAngle = Góc (độ: 0.0) 
4.  
5.     phép quay var: một số Cử chỉ { 
6.         Cử chỉ xoay() 
7.             .onChanged { góc TRONG 
8.                 self.angle = góc 
9.             } 
10.             .onEnded { góc TRONG 
11.                 vớiAnimation(Animation.spring()) { 
12.                     self.backgroundAngle = góc 
13.                 } 
14.             } 
15.     } 
16.  
17.     thân biến: một số Xem { 
18.         Hình chữ nhật() 
19.             .frame(chiều rộng: 150, chiều cao: 150, căn chỉnh: .center) 
20.             .foregroundColor(.cam) 
21.             .rotationEffect(góc của chính nó) 
22.             .cử chỉ(xoay) 
23.             .lý lịch( 
24.                 Hình chữ nhật() 
25.                     .shadow(màu sắc: .sơ đẳng, bán kính: 10, x: 0,0, y: 0,01) 
26.                     .foregroundColor(.secondary) 
27.                     .rotationEffect(góc nền) 
28.             ) 
29.     } 
30. } 

Tóm tắt

  .

Trên đây là tóm tắt những cử chỉ cơ bản của SwiftUI. Chúng ta có thể triển khai nhiều tương tác hơn để làm cho ứng dụng của mình sinh động hơn.

Đối với mục đích sử dụng nâng cao, bạn có thể kết hợp hoặc sử dụng cử chỉ đồng thời để phản hồi hoặc có thể triển khai cử chỉ tùy chỉnh của riêng mình.

Liên kết gốc: https://mp.weixin.qq.com/s/r53xNP6GRWRV9cU97LIEKA.

Cuối cùng, bài viết này về khám phá cử chỉ cơ bản của SwiftUI đã có ở đây. Nếu bạn muốn biết thêm về khám phá cử chỉ cơ bản của SwiftUI, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .