說明：

Flutter的手勢系統分為兩層，第一層是觸摸原事件（指標），有相應的四種事件型別：

1. PointerDownEvent:用戶與螢屏接觸產生了聯系；
2. PointerMoveEvent:手指已從螢屏上的一個位置移動到另一個位置；
3. PointUpEvent:用戶已停止接觸螢屏；
4. PointerCancelEvent:此指標的輸入不再指向此應用程式，

第二層就是我們可以檢測到的手勢，主要分為三大類，包括輕擊、拖動和縮放，

下面，我們來學習GestureDetector(進行手勢檢測)、Dismissible(實作滑動洗掉)

用GestureDetector進行手勢檢測

手勢事件以及描述表：

例子：制作一個自定義的按鈕，當點擊時顯示文字“你已按下”

? 代碼：

main.dart

import 'package:flutter/material.dart';
import 'package:route_page/route/page_jumps.dart';
import 'package:route_page/route/return_message.dart';
import 'package:route_page/route/send_message.dart';

import 'gesture/test_button.dart';

void main() {
  runApp(
  //   new MaterialApp(
  //   title: "導航頁面示例",
  //   home: new FirstScreen(),
  // )
  //   new MaterialApp(
  //     title: "傳遞資料示例",
  //     home: new ProductList(
  //         products:
  //         new List.generate(20, (i) => new Product('商品 $i', "這是一個商品詳情 $i"))),
  //   )
  //   new MaterialApp(
  //     title: '頁面跳轉發、回傳資料',
  //     home: new FirstPage(),
  //   )
      new MaterialApp(
        title: '頁面跳轉發、回傳資料',
        home: new MyButton(),
      )
  );
}

test_button.dart

import 'package:flutter/material.dart';
class MyButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("按下處理Demo"),
      ),

    //   注意：在同一個函式中實際創建了Scaffold時，該build函式的context引數不能用于查找Scaffold
    // （因為它在小部件樹回傳的小部件上方），在這種情況下，可以使用帶有Builder來提供一個行的作用域，該作用域具有位于Scaffold下方的BuildContext.
      body: Builder(
        builder: (BuildContext context){
          return new Center(
            // 一定要把被觸摸的組件放在GestureDetector中
            child: GestureDetector(
              onTap: (){
                // 底部資訊揭示
                final snackBar = new SnackBar(content: new Text("你已按下按鈕"));
                Scaffold.of(context).showSnackBar(snackBar);
              },
              // 容器接收觸摸動作
              child: new Container(
                child: new Text("測驗按鈕"),
                padding: EdgeInsets.all(12.0),
                decoration: BoxDecoration(
                    color: Theme.of(context).buttonColor,
                    borderRadius: new BorderRadius.circular(10.0)
                ),
              ),
            ),
          );
        },
      )
    );
  }
}

用Dismissible實作滑動洗掉

1. Dismissible組件屬性及描述表

   屬性名	型別	說明
   onDismissed	DismissDirectionCallback	當包裹的組件消失后回呼的函式
   movementDuration	Duration	定義組件訊息的時長
   onResize	VoidCallback	組件大小改變時回呼的函式
   resizeDuration	Duration	組件大小改變時長
   child	Widget	組件包裹的子元素，即被隱藏的對像

2. 例子：實作滑動串列中的某一項資料，就可以洗掉的效果

   main.dart

   iimport 'package:flutter/material.dart';
   import 'package:route_page/route/page_jumps.dart';
   import 'package:route_page/route/return_message.dart';
   import 'package:route_page/route/send_message.dart';
   
   import 'gesture/dismissible.dart';
   import 'gesture/test_button.dart';
   
   void main() {
     runApp(
     //   new MaterialApp(
     //   title: "導航頁面示例",
     //   home: new FirstScreen(),
     // )
     //   new MaterialApp(
     //     title: "傳遞資料示例",
     //     home: new ProductList(
     //         products:
     //         new List.generate(20, (i) => new Product('商品 $i', "這是一個商品詳情 $i"))),
     //   )
     //   new MaterialApp(
     //     title: '頁面跳轉發、回傳資料',
     //     home: new FirstPage(),
     //   )
     //     new MaterialApp(
     //       title: '頁面跳轉發、回傳資料',
     //       home: new MyButton(),
     //     )
         new MaterialApp(
           title: '  滑動洗掉示例',
           home: new MyApp(),
         )
     );
   }
   
   
   

   dismissible.dart

   import 'package:flutter/material.dart';
   class MyApp extends StatelessWidget{
     List<String> items = new List<String>.generate(30, (i) => "串列項 ${i+1}");
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return Scaffold(
         appBar: AppBar(
           title: Text("滑動洗掉示例"),
         ),
       //   使用ListView.builder生成串列，將串列中的每一項子項（ListTile）包裝在Dismissible中；
       // 在onDismissed執行真正的洗掉操作
         body: new ListView.builder(
           itemCount: items.length,//決定itemBuilder回呼函式的次數
           itemBuilder: (context,index){
             final item = items[index];
             // 對需要實作滑動清除的Widget包裝在child中
             return new Dismissible(
                 key: new Key(item),//key是widget的唯一標示，因為有了key，widget tree才知道我們洗掉了什么widget
                 // 可以被洗掉的組件
                 child: new ListTile(title: new Text('$item'),),
                 // 完成清除后，進行的操作
                 onDismissed: (direction){
                   // 洗掉后重繪串列，已到達真正的洗掉
                   items.removeAt(index);
                   Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$item 被洗掉來")));
               },
             );
           },
         )
       );
     }
   }