Flutter - ความรู้เบื้องต้นเกี่ยวกับท่าทางสัมผัส

ท่าทางสัมผัสเป็นวิธีหลักสำหรับผู้ใช้ในการโต้ตอบกับแอปพลิเคชันมือถือ (หรืออุปกรณ์ที่ใช้ระบบสัมผัส) โดยทั่วไปท่าทางสัมผัสหมายถึงการกระทำ / การเคลื่อนไหวใด ๆ ของผู้ใช้เพื่อเปิดใช้งานการควบคุมเฉพาะของอุปกรณ์เคลื่อนที่ ท่าทางสัมผัสนั้นง่ายเพียงแค่แตะที่หน้าจอของอุปกรณ์เคลื่อนที่ไปจนถึงการกระทำที่ซับซ้อนมากขึ้นซึ่งใช้ในแอปพลิเคชันเกม

ท่าทางที่ใช้กันอย่างแพร่หลายบางส่วนมีการกล่าวถึงที่นี่ -

  • Tap - สัมผัสพื้นผิวของอุปกรณ์ด้วยปลายนิ้วเป็นระยะเวลาสั้น ๆ จากนั้นปล่อยปลายนิ้ว

  • Double Tap - แตะสองครั้งในเวลาสั้น ๆ

  • Drag - แตะพื้นผิวของอุปกรณ์ด้วยปลายนิ้วจากนั้นขยับปลายนิ้วในลักษณะนิ่ง ๆ แล้วปล่อยปลายนิ้วในที่สุด

  • Flick - คล้ายกับการลาก แต่ทำด้วยวิธีที่เร็วกว่า

  • Pinch - บีบพื้นผิวของอุปกรณ์โดยใช้สองนิ้ว

  • Spread/Zoom - ตรงข้ามกับการหนีบ

  • Panning - สัมผัสพื้นผิวของอุปกรณ์ด้วยปลายนิ้วและเคลื่อนไปในทิศทางใดก็ได้โดยไม่ต้องปล่อยปลายนิ้ว

Flutter ให้การสนับสนุนที่ยอดเยี่ยมสำหรับท่าทางทุกประเภทผ่านวิดเจ็ตพิเศษ GestureDetector. GestureDetector เป็นวิดเจ็ตที่ไม่ใช่ภาพที่ใช้สำหรับตรวจจับท่าทางของผู้ใช้เป็นหลัก ในการระบุท่าทางที่กำหนดเป้าหมายบนวิดเจ็ตวิดเจ็ตสามารถวางไว้ในวิดเจ็ต GestureDetector GestureDetector จะจับท่าทางและส่งเหตุการณ์ต่างๆตามท่าทาง

ท่าทางบางส่วนและเหตุการณ์ที่เกี่ยวข้องมีให้ด้านล่าง -

  • Tap
    • onTapDown
    • onTapUp
    • onTap
    • onTapCancel
  • แตะสองครั้ง
    • onDoubleTap
  • กดแบบยาว
    • onLongPress
  • ลากแนวตั้ง
    • onVerticalDragStart
    • onVerticalDragUpdate
    • onVerticalDragEnd
  • ลากแนวนอน
    • onHorizontalDragStart
    • onHorizontalDragUpdate
    • onHorizontalDragEnd
  • Pan
    • onPanStart
    • onPanUpdate
    • onPanEnd

ตอนนี้ให้เราปรับเปลี่ยนแอปพลิเคชัน hello world เพื่อรวมคุณสมบัติการตรวจจับท่าทางและพยายามทำความเข้าใจแนวคิด

  • เปลี่ยนเนื้อหาของวิดเจ็ตMyHomePageดังที่แสดงด้านล่าง -

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),
  • สังเกตว่าที่นี่เราได้วางวิดเจ็ตGestureDetectorไว้เหนือวิดเจ็ต Text ในลำดับชั้นวิดเจ็ตจับเหตุการณ์ onTap จากนั้นจึงแสดงหน้าต่างโต้ตอบในที่สุด

  • ใช้ * * * * * * * * _showDialog ฟังก์ชั่นการโต้ตอบในปัจจุบันเมื่อแท็บการใช้ข้อความ Hello World ใช้วิดเจ็ตshowDialogและAlertDialogทั่วไปเพื่อสร้างวิดเจ็ตโต้ตอบใหม่ รหัสดังแสดงด้านล่าง -

// 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();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}
  • แอปพลิเคชันจะโหลดซ้ำในอุปกรณ์โดยใช้คุณสมบัติ Hot Reload ตอนนี้เพียงคลิกที่ข้อความ Hello World และจะแสดงกล่องโต้ตอบดังต่อไปนี้ -

  • ตอนนี้ปิดกล่องโต้ตอบโดยคลิกตัวเลือกปิดในกล่องโต้ตอบ

  • รหัสที่สมบูรณ์ (main.dart) มีดังนี้ -

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', )
            )
         ),
      );
   }
}

สุดท้าย Flutter ยังมีกลไกการตรวจจับท่าทางระดับต่ำผ่านวิดเจ็ตListener มันจะตรวจจับการโต้ตอบของผู้ใช้ทั้งหมดแล้วยื้อเหตุการณ์ต่อไปนี้ -

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

Flutter ยังมีวิดเจ็ตชุดเล็ก ๆ สำหรับทำเฉพาะและท่าทางขั้นสูง วิดเจ็ตอยู่ด้านล่าง -

  • Dismissible - รองรับท่าทางการปัดเพื่อปิดวิดเจ็ต

  • Draggable - รองรับท่าทางลากเพื่อย้ายวิดเจ็ต

  • LongPressDraggable - รองรับท่าทางลากเพื่อย้ายวิดเจ็ตเมื่อวิดเจ็ตหลักสามารถลากได้

  • DragTarget- ยอมรับวิดเจ็ตที่ลากได้

  • IgnorePointer - ซ่อนวิดเจ็ตและลูก ๆ จากกระบวนการตรวจจับท่าทาง

  • AbsorbPointer - หยุดกระบวนการตรวจจับท่าทางเองดังนั้นวิดเจ็ตที่ทับซ้อนกันก็ไม่สามารถเข้าร่วมในกระบวนการตรวจจับท่าทางได้ดังนั้นจึงไม่มีเหตุการณ์ใดเกิดขึ้น

  • Scrollable - รองรับการเลื่อนเนื้อหาที่มีอยู่ภายในวิดเจ็ต