Flutter - Giới thiệu về Cử chỉ

Cử chỉ chủ yếu là cách để người dùng tương tác với ứng dụng di động (hoặc bất kỳ thiết bị dựa trên cảm ứng nào). Cử chỉ thường được định nghĩa là bất kỳ hành động / chuyển động vật lý nào của người dùng với mục đích kích hoạt một điều khiển cụ thể của thiết bị di động. Các cử chỉ đơn giản như chạm vào màn hình của thiết bị di động cho đến các hành động phức tạp hơn được sử dụng trong các ứng dụng trò chơi.

Một số cử chỉ được sử dụng rộng rãi được đề cập ở đây -

• Tap - Chạm vào bề mặt của thiết bị bằng đầu ngón tay trong khoảng thời gian ngắn rồi thả ngón tay ra.

• Double Tap - Khai thác hai lần trong một thời gian ngắn.

• Drag - Chạm vào bề mặt của thiết bị bằng đầu ngón tay, sau đó di chuyển đầu ngón tay một cách ổn định và cuối cùng thả ngón tay ra.

• Flick - Tương tự như kéo, nhưng làm theo cách nhanh hơn.

• Pinch - Dùng hai ngón tay véo bề mặt của thiết bị.

• Spread/Zoom - Đối lập với véo von.

• Panning - Chạm vào bề mặt của thiết bị bằng đầu ngón tay và di chuyển theo bất kỳ hướng nào mà không cần thả ngón tay ra.

Flutter cung cấp sự hỗ trợ tuyệt vời cho tất cả các loại cử chỉ thông qua tiện ích độc quyền của nó, GestureDetector. GestureDetector là một tiện ích không trực quan chủ yếu được sử dụng để phát hiện cử chỉ của người dùng. Để xác định một cử chỉ được nhắm mục tiêu trên một tiện ích, tiện ích có thể được đặt bên trong tiện ích GestureDetector. GestureDetector sẽ nắm bắt cử chỉ và gửi nhiều sự kiện dựa trên cử chỉ.

Dưới đây là một số cử chỉ và sự kiện tương ứng:

• Tap
• onTapDown
• onTapUp
• onTap
• onTapCancel

• Nhấn đúp
• onDoubleTap

• Nhấn và giữ
• onLongPress

• Kéo dọc
• onVerticalDragStart
• onVerticalDragUpdate
• onVerticalDragEnd

• Kéo ngang
• onHorizontalDragStart
• onHorizontalDragUpdate
• onHorizontalDragEnd

• Pan
• onPanStart
• onPanUpdate
• onPanEnd

Bây giờ, chúng ta hãy sửa đổi ứng dụng hello world để bao gồm tính năng phát hiện cử chỉ và cố gắng hiểu khái niệm này.

• Thay đổi nội dung nội dung của tiện ích MyHomePage như hình dưới đây -

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),

• Hãy quan sát rằng ở đây chúng ta đã đặt tiện ích GestureDetector phía trên tiện ích Văn bản trong phân cấp tiện ích, nắm bắt sự kiện onTap và cuối cùng hiển thị một cửa sổ hộp thoại.

• Triển khai hàm * _showDialog * để trình bày hộp thoại khi người dùng nhấn vào thông báo hello world . Nó sử dụng generic ShowDialog và AlertDialog widget để tạo một widget thoại mới. Mã được hiển thị bên dưới -

// user defined function void _showDialog(BuildContext context) { 
   // flutter defined function 
   showDialog( 
      context: context, builder: (BuildContext context) { 
         // return object of type Dialog
         return AlertDialog( 
            title: new Text("Message"), 
            content: new Text("Hello World"),   
            actions: <Widget>[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

• Ứng dụng sẽ tải lại trong thiết bị bằng tính năng Tải lại nóng. Bây giờ, chỉ cần nhấp vào thông báo, Hello World và nó sẽ hiển thị hộp thoại như bên dưới:

• Bây giờ, đóng hộp thoại bằng cách nhấp vào tùy chọn đóng trong hộp thoại.

• Mã hoàn chỉnh (main.dart) như sau:

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application.    
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application', 
         theme: ThemeData( primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Home page'), 
      ); 
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   // user defined function 
   void _showDialog(BuildContext context) { 
      // flutter defined function showDialog( 
         context: context, builder: (BuildContext context) { 
            // return object of type Dialog return AlertDialog(
               title: new Text("Message"), 
               content: new Text("Hello World"),   
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"), 
                     onPressed: () {   
                        Navigator.of(context).pop();  
                     }, 
                  ), 
               ],
            );
         },
      );
   }
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector( 
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

Cuối cùng, Flutter cũng cung cấp một cơ chế phát hiện cử chỉ cấp thấp thông qua tiện ích Listener . Nó sẽ phát hiện tất cả các tương tác của người dùng và sau đó gửi đi các sự kiện sau:

• PointerDownEvent
• PointerMoveEvent
• PointerUpEvent
• PointerCancelEvent

Flutter cũng cung cấp một tập hợp nhỏ các widget để thực hiện các cử chỉ cụ thể cũng như nâng cao. Các tiện ích được liệt kê bên dưới -

• Dismissible - Hỗ trợ cử chỉ vuốt để loại bỏ tiện ích.

• Draggable - Hỗ trợ cử chỉ kéo để di chuyển widget.

• LongPressDraggable - Hỗ trợ cử chỉ kéo để di chuyển tiện ích con, khi tiện ích con của nó cũng có thể kéo được.

• DragTarget- Chấp nhận mọi tiện ích có thể kéo được

• IgnorePointer - Ẩn widget và con của nó khỏi quá trình phát hiện cử chỉ.

• AbsorbPointer - Tự dừng quá trình phát hiện cử chỉ và do đó bất kỳ tiện ích con chồng chéo nào cũng không thể tham gia vào quá trình phát hiện cử chỉ và do đó, không có sự kiện nào được đưa ra.

• Scrollable - Hỗ trợ cuộn nội dung có sẵn bên trong widget.