Gestures در فلاتر

Gestures در اصل راهی برای ارتباط برقرار کردن کاربر با برنامه تلفن همراه (یا هر وسیله لمسی) است. Gestures به طور کلی به عنوان هرگونه عملکرد / حرکت فیزیکی کاربر به منظور فعال کردن کنترل خاص دستگاه تلفن همراه تعریف می شود. Gestures به آسانی ضربه زدن روی صفحه نمایش دستگاه تلفن همراه به اقدامات پیچیده تری است که در برنامه های بازی استفاده می شود.

برخی از Gestures پرکاربرد در اینجا ذکر شده است –

Tap – لمس سطح دستگاه را با نوک انگشت برای مدت کوتاه و سپس رها کردن نوک انگشت.
Double Tap – دو بار در مدت زمان کوتاه ضربه بزنید .
Drag – لمس سطح دستگاه را با نوک انگشت و سپس حرکت نوک انگشت به صورت ثابت و سپس در نهایت نوک انگشت آزاد کنید.
Flick – شبیه به کشیدن ، اما انجام این کار با روشی سریع تر.
Pinch – فشار دادن سطح دستگاه با استفاده از دو انگشت.
Spread/Zoom – روبرو از فشار دادن.
Panning – لمس سطح دستگاه با نوک انگشت و حرکت آن از هر جهت و بدون رها کردن انگشت.

فلاتر از طریق ویجت اختصاصی خود یعنی GestureDetector پشتیبانی عالی برای همه نوع حرکات ارائه می دهد . GestureDetector یک ویجت غیر بصری است که در اصل برای تشخیص حرکات کاربر استفاده می شود. برای شناسایی یک gesture هدفمند در یک ویجت ، ویجت را می توان در ویجت GestureDetector قرار داد. GestureDetector ژست gesture را ضبط می کند و چندین رویداد را بر اساس gesture ارسال می کند.

برخی از حرکات و رویدادهای مربوطه در زیر آورده شده است –

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

اکنون ، برنامه HelloWorld را اصلاح کنیم تا ویژگی تشخیص حرکات را در بر بگیرد و درک بهتری داشته باشیم.

محتوای body ویجت MyHomePage را مطابق شکل زیر تغییر دهید –

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

body: Center(

child: GestureDetector(

onTap: () {

_showDialog(context);

child: Text( 'Hello World', )

)

مشاهده می کنید که در اینجا ویجت GestureDetector را در بالای ویجت Text در سلسله مراتب ویجت قرار داده ایم ، رویداد onTap را ضبط کرده و در آخر یک dialog window نشان داده ایم.
تابع * _showDialog * را اجرا کنید تا وقتی کاربر پیام HelloWorld را لمس می کند ، dialog ارائه دهید . از ویجت عمومی showDialog و AlertDialog برای ایجاد یک ویجت dialog جدید استفاده می کند. کد در زیر نشان داده شده است –

// 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: &lt;Widget&gt;[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

// 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 در دستگاه بارگیری مجدد می شود. اکنون ، بر روی پیام ، HelloWorld کلیک کنید و dialog مانند زیر را نشان می دهد –

اکنون ، با کلیک روی گزینه close در dialog ، dialog را ببندید.
کد کامل (main.dart) به شرح زیر است –

import 'package:flutter/material.dart'; 
void main() =&gt; 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: &lt;Widget&gt;[
                  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', )
            )
         ),
      );
   }
}

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

)

);

}

سرانجام ، فلاتر همچنین مکانیسم تشخیص low-level gesture را از طریق ویجت Listener فراهم می کند . همه تعاملات کاربر را تشخیص داده و رویدادهای زیر را ارسال می کند –

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter همچنین مجموعه ای کوچک از ویجت ها را برای انجام حرکات خاص و پیشرفته ارائه می دهد. ویجت های زیر ذکر شده است –

Dismissible – پشتیبانی از حرکت flick gesture برای رد کردن ویجت.
Draggable – حرکات کشیدن را برای جابجایی ویجت پشتیبانی می کند.
LongPressDraggable – هنگامی که ویجت والدینش قابل کشیدن است ، از gesture کشیدن برای جابجایی ویجت پشتیبانی می کند.
DragTarget – هر ویجت قابل کشیدن را پذیرفته است
IgnorePointer – ویجت و فرزندانش را از روند تشخیص gesture مخفی می کند.
AbsorbPointer – خود فرآیند تشخیص gesture را متوقف می کند و بنابراین هر ویجت همپوشانی نیز قادر به شرکت در فرآیند تشخیص gesture نیست و از این رو هیچ رویدادی مطرح نمی شود.
Scrollable – پشتیبانی از پیمایش محتوای موجود در ویجت.

5/5 - (1 امتیاز)

Gestures در فلاتر – Flutter

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

آموزش فلاتر – Flutter

ابزار توسعه فلاتر – Flutter

تبدیل اپلیکیشن فلاتر به اندروید و IOS

تست کردن در فلاتر – Flutter testing

ترجمه اپلیکیشن ها در فلاتر – Flutter

کار با دیتابیس در فلاتر -Flutter

دیدگاهتان را بنویسید لغو پاسخ