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 - รองรับการเลื่อนเนื้อหาที่มีอยู่ภายในวิดเจ็ต