A dragging motion that invokes an action as the drag-event sequence changes.
Apple Documentation
Trong hướng dẫn này, chúng ta sẽ tìm hiểu Drag Gesture trong SwiftUI là gì:
- .onChanged.
- .updating.
- .onEnded.
- limit scrolling.
Điều kiện tiên quyết
Để làm theo hướng dẫn này, bạn sẽ cần một số kiến thức cơ bản về:
- Cơ bản với Swift.
- Xcode 11 trở lên
.onChanged
onChanged thay đổi giá trị của vị trí khi bạn kéo.
Đầu tiên, tạo một biến để lưu kích thước. Với biến bên dưới, đối tượng được đặt ở tọa độ với x, y là 50
1 2 | @State private var rectPosition = CGPoint(x: 50, y: 50) |
Khi hình chữ nhật di chuyển, bạn sẽ thay đổi rectPosition
1 2 3 4 5 6 7 8 9 10 | VStack { RoundedRectangle(cornerRadius: 4.0) .fill(Color.green) .frame(width: 100, height: 100) .position(rectPosition) .gesture(DragGesture().onChanged({ value in self.rectPosition = value.location })) } |
Kết quả là bạn có một hình chữ nhật chuyển động như dưới.
.updating
Bạn có thể biết người dùng có đang kéo hay không bằng cách lấy state. Đầu tiên, tạo GestureState để giữ trạng thái drag.
1 2 | @GestureState private var isDragging = false |
Tại đây, bạn không thể cập nhật isDragging vì nó ở chế độ chỉ đọc.
Tuy nhiên, bạn có thể cập nhật state sau đó nó sẽ cập nhật isDragging.
1 2 3 4 5 6 | .gesture(DragGesture().onChanged({ value in self.rectPosition = value.location }).updating($isDragging, body: { (value, state, trans) in state = true })) |
.onEnded
Nhiều trường hợp bạn chỉ muốn lấy hành động sau khi người dùng kéo xong đối tượng.
Đầu tiên, tạo một biến để biết người dùng kết thúc kéo hay chưa.
1 2 | @State private var isEnded = false |
Sử dụng cùng mã như trên và chỉnh sửa một chút, cho màu thay đổi nếu x nhỏ hơn 120.
1 2 3 4 5 6 7 8 9 10 11 12 | VStack { RoundedRectangle(cornerRadius: 4.0) .fill(isEnded ? Color.red : Color.green) .frame(width: 100, height: 100) .position(rectPosition) .gesture(DragGesture().onChanged({ value in self.rectPosition = value.location }).onEnded({ value in self.isEnded = value.location.x < 120 })) } |
Kết quả:
Hạn chế cuộn ngang
1 2 3 4 | .gesture(DragGesture().onChanged({ value in self.rectPosition = CGPoint(x: value.location.x, y: 50) })) |
Còn nếu bạn chỉ muốn nó cuộn theo chiều dọc, thì bạn chỉ việc thay đổi giá trị y.