Giới thiệu về Gestures trong Flutter

Giới thiệu về Gestures trong Flutter

Rate this post

Gesture là cách chính mà người dùng tương tác với ứng dụng điện thoại (hoặc bất cứ thiết bị cảm ứng khác) . Gesture được định nghĩa như là các hành động vật lý / chuyển động của một người dùng nhằm mục đích kích hoạt một điều khiển của thiết bị di động. Gesture là những thứ đơn giản như chạm nhẹ vào màn hình của thiết bị di động đến những thứ phức tạp hơn được sử dụng trong ứng dụng game.

Các bài viết liên quan:

Các loại gestures được sử dụng rộng rãi nhất là:

  • Tap – chạm vào bề mặt của ứng dụng bằng đầu ngón tay với khoảng thời gian ngắn và thả ngón tay ra.
  • Double Tap – chạm vào bề mặt 2 lần trong thời gian ngắn.
  • Drag – chạm vào bề mặt của ứng dụng và di chuyển đầu ngón tay một cách ổn định.
  • Flick – Như di chuyển Drag nhưng ta thực hiện nhanh hơn
  • Pinch – dùng 2 ngón tay để kéo bề mặt của thiết bị
  • Spread/Zoom – ngược lại với pinch
  • Panning – chạm vào bề mặt của thiết bị với đầu ngon tay và kéo nó đến bất kỳ hướng nào mà không thả đầu ngón tay ra

Flutter cung cấp một sử hỗ trợ tuyệt vời cho tất cả các loại gesture thông qua widget độc lập của nó là GestureDetector. GestureDetector là một widget non-visual được sử dụng chính cho việc tìm các thao tác của người dùng. Để xác định một thao tác được nhắm tới trong widget, widget có thể được đặt bên trong widget GestureDetector. GestureDetector sẽ bắt chuyển động và điều phối các sự kiện dựa trên chuyển động đó.

Sau đây là các loại action và các event của gestures:

  • Tap
  • onTapDown
  • onTapUp
  • onTap
  • onTapCancel
  • Double tap
  • onDoubleTap
  • Long press
  • onLongPress
  • Vertical drag
  • onVerticalDragStart
  • onVerticalDragUpdate
  • onVerticalDragEnd
  • Horizontal drag
  • onHorizontalDragStart
  • onHorizontalDragUpdate
  • onHorizontalDragEnd
  • Pan
  • onPanStart
  • onPanUpdate
  • onPanEnd

Giờ thì chúng ta hã cùng nhau điều chỉnh lại ứng dụng hello world này để sử dụng chức năng bắt chuyển động và cố gắng hiểu hơn về khái niệm này

Đổi code trong thuộc tính body của widget MyHomePage như sau:

Giới thiệu về Gestures trong Flutter
  • Theo quan sát thì chúng ta đã đặt widget GestureDetector bên trên widget Text trong phân cấp các widget. nó sẽ bắt sự kiện onTap và cuối cùng sẽ hiển thị với chúng ta màn hình hộp thoại.
  • Ta sẽ tạo sử dụng hàm _showDialog để hiển thị một hộp thoại khi người dùng chạm vào thông điệp hello world đó, nó sử dụng widget showDialogAlertDialog để tạo một widget hộp thoại mới. Đoạn đó sẽ code như sau:
Giới thiệu về Gestures trong Flutter
  • Giờ thì ta chỉ cần chạy lại ứng dụng hoặc sử dụng chức năng Hot Reload để chạy lại ứng dụng, Và sau khi ứng dụng đã chạy ta chỉ cần đơn giản là chạm vào chữ hello world thì hộp thoại như thế này sẽ hiện ra:
Giới thiệu về Gestures trong Flutter

Vậy là ta đã sử dụng thành công widget GestureDetector, ngoài ra thì Flutter còn cung cấp cơ chế dò chuyển động thông qua widget Listener.

Nó sẽ dò các thao tác người dùng và điều hướng đến các sự kiện như sau:

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

Ngoài ra Flutter còn cung cấp một lượng nhỏ các widget có thể làm những điều như các thao tác nâng cao.

Các widget ấy sẽ được liệt kê dưới đây:

  • Dismissble – hỗ trợ thao tác flick nhằm bỏ qua một widget.
  • Draggable – hỗ trợ thao tác kéo để di chuyển một widget.
  • LongPressDragable – hỗ trợ thao tác kéo để di chuyển một widget, khi mà widget gốc của nó cũng là dragable.
  • DragTarget – chấp nhận bất cứ widget Draggable .
  • IgnorePointer – ẩn widget và con của nó từ bộ xử lý dò chuyển động.
  • AbsorbPointer – dừng chính bộ xử lý dò chuyển động của nó và bất cứ widget nào có liên kết với nó đều bị dừng hết, nên sẽ không có bất cứ sự kiện nào được gọi.
  • Scrollable – hỗ trợ cuộn nội dung có bên trong widget.

Leave a Reply