ژست ها در فلاتر (Flutter)

ژست‌های حرکتی به کاربران اجازه می‌دهند تا با اپلیکیشن‌های موبایل یا دیگر دستگاه‌های لمسی تعامل داشته باشند. این ژست‌ها می‌توانند شامل حرکت دادن انگشت روی صفحه برای باز کردن قفل گوشی، ضربه زدن روی یک دکمه، یا نگه داشتن و کشیدن یک آیکون باشند.

• وقتی صفحه موبایل قفل است، انگشت خود را روی صفحه می‌کشید تا قفل آن باز شود
• روی یک دکمه روی صفحه موبایل خود ضربه بزنید
• روی ایکون یک برنامه روی یک دستگاه لمسی ضربه بزنید و نگه دارید تا آن را روی صفحه بکشید.

ما از همه این حرکات در زندگی روزمره برای تعامل با تلفن یا دستگاه لمسی شما استفاده می کنیم.

فلاتر سیستم ژست را به دو لایه مختلف تقسیم می کند که در زیر آورده شده است:

1. Pointers (اشاره گرها)

2. Gestures (ژست های حرکتی)

Pointers

اشاره گرها اولین لایه ای هستند که داده های خام در مورد تعامل کاربر را نشان می دهند. دارای رویدادهایی است که مکان و حرکت اشاره گرهایی مانند لمس، موش و سبک را در سراسر صفحه نمایش می دهد. فلاتر هیچ مکانیزمی برای لغو یا توقف ارسال بیشتر رویدادهای اشاره گر ارائه نمی دهد. فلاتر یک ویجت را برای گوش دادن به رویدادهای اشاره گر مستقیماً از لایه ویجت ها فراهم می کند. رویدادهای اشاره گر به چهار نوع عمده تقسیم می شوند:

• PointerDownEvents
• PointerMoveEvents
• PointerUpEvents
• PointerCancelEvents

PointerDownEvents: به اشاره گر اجازه می دهد تا با صفحه نمایش در یک مکان خاص تماس بگیرد.

PointerMoveEvents: به نشانگر اجازه می دهد تا از یک مکان به مکان دیگر روی صفحه حرکت کند

PointerUpEvents: به اشاره گر اجازه می دهد تا تماس با صفحه را متوقف کند

PointerCancelEvents: این رویداد زمانی ارسال می شود که تعامل اشاره گر لغو شود

Gestures

این لایه بالاتر، ترجمه‌ای از اشاره‌گرها به عملکردهای معنی‌دارتر است، مثل ضربه زدن، کشیدن، و دو بار ضربه زدن. Flutter ویجت‌هایی مانند GestureDetector را فراهم می‌کند تا برنامه‌نویسان بتوانند به راحتی رویدادهای ژست را در برنامه‌های خود مدیریت کنند.

: Tap یعنی برای مدت کوتاهی سطح صفحه نمایش را از نوک انگشت لمس کرده و سپس آنها را رها کنید. این ژست شامل رویدادهای زیر است:

• onTapDown
• onTapUp
• onTap
• onTapCancel

Double Tap : شبیه یک حرکت ضربه زدن است، اما باید در مدت زمان کوتاهی دو بار ضربه بزنید. این ژست شامل رویدادهای زیر است:

• onDoubleTap

Drag: به ما این امکان را می دهد که سطح صفحه را با نوک انگشت لمس کنیم و آن را از یک مکان به مکان دیگر منتقل کنیم و سپس آنها را رها کنیم. فلاتر درگ را به دو نوع دسته بندی می کند:

1. Horizontal Drag : این ژست به اشاره گر اجازه می دهد تا در جهت افقی حرکت کند و شامل رویدادهای زیر است:

• onHorizontalDragStart
• onHorizontalDragUpdate
• onHorizontalDragEnd

2. Vertical Drag: این ژست به اشاره گر اجازه می دهد تا در جهت عمودی حرکت کند و شامل رویدادهای زیر است:

• onVerticalDragStart
• onVerticalDragStart
• onVerticalDragStart

Long Press: به معنای لمس سطح صفحه نمایش در یک مکان خاص برای مدت طولانی است. این ژست شامل رویدادهای زیر است:

• onLongPress

pan: به معنای لمس سطح صفحه با نوک انگشت است که می تواند بدون رها کردن نوک انگشت به هر جهتی حرکت کند. این ژست شامل رویدادهای زیر است:

• onPanStart
• onPanUpdate
• onPanEnd

Pinch: این به معنای نیشگون گرفتن (حرکت دادن انگشت و شست یا کنار هم قرار دادن آنها روی صفحه نمایش لمسی) با استفاده از دو انگشت برای بزرگنمایی یا کوچک کردن صفحه نمایش است.

Gesture Detector یا سنسور حرکتی

فلاتر امکان شناسایی حرکات کاربر را با استفاده از ویجت GestureDetector فراهم می‌کند. این ویجت به شما اجازه می‌دهد تا واکنش‌هایی مانند ضربه زدن یا کشیدن را تشخیص دهید. GestureDetector ویجتی است که در پشت‌صحنه کار می‌کند و حرکات مختلف را بر اساس ورودی‌های لمسی کاربر پردازش می‌کند. برای استفاده از این ویجت، می‌توانید تابع onTap() را تعریف کنید که زمانی فراخوانی می‌شود که کاربر روی صفحه ضربه بزند. در این نمونه، ما یک ویجت مستطیل (باکس) ساخته‌ایم و تابع onTap() را به آن اختصاص داده‌ایم تا هنگام ضربه زدن روی آن، یک عمل خاص انجام شود. با این روش، می‌توانید حرکات کاربر را در برنامه خود به طور موثری تشخیص دهید و به آن‌ها پاسخ دهید.

حالا یک پروژه فلاتر جدید ایجاد کنید و کد زیر را در فایل main.dart جایگزین کنید

 import 'package:flutter/material.dart';


 class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo Application', theme: ThemeData(
       primarySwatch: Colors.green,),
       home: MyHomePage(),
     );
   }
 }
 class MyHomePage extends StatefulWidget {
   @override
   MyHomePageState createState() => new MyHomePageState();
 }

 class MyHomePageState extends State
    {
       @override
       Widget build(BuildContext context) {
         return new Scaffold(
           appBar: new AppBar(
             title: new Text('Gestures Example'),
             centerTitle: true,
           ),
           body: new Center(child: GestureDetector(
               onTap: () {
                 print('Box Clicked');
               },
               child: Container(
                 height: 60.0,
                 width: 120.0,
                 padding: EdgeInsets.all(10.0),
                 decoration: BoxDecoration(
                   color: Colors.blueGrey,
                   borderRadius: BorderRadius.circular(15.0),
                 ),
                 child: Center(child: Text('Click Me')),
               )
           )),
         );
       }
     }

خروجی

وقتی این فایل دارت را در اندروید استودیو اجرا می کنید، خروجی زیر را در شبیه ساز می دهد:

در تصویر بالا دکمه ای با لبه های گرد در مرکز صفحه نمایش را مشاهده می کنید. وقتی روی آن ضربه می زنید، مانند یک دکمه عمل می کند و خروجی را می توان در کنسول مشاهده کرد

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

Dismissible: این یک نوع ویجت است که از حرکت ناگهانی (تکان سریع) برای رد کردن ویجت پشتیبانی می کند.

Draggable: این یک نوع ویجت است که از حرکات کشیدن برای جابجایی ویجت پشتیبانی می کند.

LongPressDraggable: این یک نوع ویجت است که از حرکت کشیدن برای جابجایی ویجت همراه با ویجت والد آن پشتیبانی می کند.

DragTarget: این یک نوع ویجت است که می تواند هر ویجت قابل کشیدنی را بپذیرد.

IgnorePointer: این یک نوع ویجت است که ویجت و فرزندان آن را از فرآیند تشخیص حرکت پنهان می کند.

AbsorbPointer: این یک نوع ویجت است که خود فرآیند تشخیص ژست را متوقف می کند. به همین دلیل، هر ویجت همپوشانی نمی تواند در فرآیند تشخیص ژست شرکت کند، و بنابراین، هیچ رویدادی مطرح نمی شود.

Scrollable: این یک نوع ویجت است که از پیمایش (اسکرول) محتوای موجود در داخل ویجت پشتیبانی می کند.

مثال ژست/ حرکت های چند گانه

در این قسمت قصد داریم نحوه عملکرد چند حرکتی در اپلیکیشن های فلاتر را ببینیم. این برنامه آزمایشی از دو کانتینر والد و فرزند تشکیل شده است. در اینجا، با استفاده از «RawGestureDetector» و یک «GestureRecognizer» سفارشی، همه چیز به صورت دستی مدیریت می‌شود. GestureRecognizer سفارشی ویژگی "AllowMultipleGestureRecognizer" را در لیست ژست ها ارائه می دهد و یک "GestureRecognizerFactoryWithHandlers" ایجاد می کند در مرحله بعد، هنگامی که رویداد onTap() فراخوانی می شود، متن را در کنسول چاپ می کند.

پروژه flutter را باز کرده و کد زیر را در فایل main.dart جایگزین کنید.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

//It is the entry point for your Flutter app.
void main() {
  runApp(
    MaterialApp(
      title: 'Multiple Gestures Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Gestures Demo'),
        ),
        body: DemoApp(),
      ),
    ),
  );
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
            AllowMultipleGestureRecognizer>(
              () => AllowMultipleGestureRecognizer(),
              (AllowMultipleGestureRecognizer instance) {
            instance.onTap = () => print('It is the parent container gesture');
          },
        )
      },
      behavior: HitTestBehavior.opaque,
      //Parent Container
      child: Container(
        color: Colors.green,
        child: Center(
          //Now, wraps the second container in RawGestureDetector
          child: RawGestureDetector(
            gestures: {
              AllowMultipleGestureRecognizer:
              GestureRecognizerFactoryWithHandlers<
                  AllowMultipleGestureRecognizer>(
                    () => AllowMultipleGestureRecognizer(),  //constructor
                    (AllowMultipleGestureRecognizer instance) {  //initializer
                  instance.onTap = () => print('It is the nested container');
                },
              )
            },
            //Creates the nested container within the first.
            child: Container(
              color: Colors.deepOrange,
              width: 250.0,
              height: 350.0,
            ),
          ),
        ),
      ),
    );
  }
}

class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

خروجی :

هنگامی که برنامه را اجرا می کنید، خروجی زیر نمایش داده می شود.

سپس روی کادر نارنجی رنگ ضربه بزنید، خروجی زیر روی کنسول شما ظاهر می شود:

It is the nested container.
It is the parent container gesture.