Flutter开发All in FlutterFlutter

Flutter中的手势处理

2019-02-19  本文已影响28人  CQ_TYL

移动应用的一个必不可少的环节就是与用户的交互,在Android中提供了手势检测,并为手势检测提供了相应的监听。本文将介绍Flutter中手势检测GestureDetector。
Flutter中的手势系统分为两层,第一层是触摸原事件(指针),有相应的四种事件类型。

  1. PointerDownEvent :用户与屏幕接触产生了联系。
  2. PointerMoveEvent :手指已从屏幕上的一个位置移动到另一个位置。
  3. PointerUpEvent :用户已停止接触屏幕。
  4. PointerCancelEvent :此指针的输入不再指向此应用程序。
    第二层就是我们可以检测到的手势,主要分为三大类,包括轻击,拖动和缩放,下面是具体的手势监听方法。
点击(一次):
双击:

onDoubleTap :用户快速连续两次在同一位置点击屏幕。

长按:

onLongPress :长时间保持与相同位置的屏幕接触

垂直拖动:
水平拖动:
import 'package:flutter/material.dart';
void main() =>
    runApp(new MaterialApp(
        home: new MyApp()
    ));
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      /*点击*/
      onTap: () {
        print("文本点击了");
      },
      /*长按*/
      onLongPress: () {
        print("长按文本");
      },
      /*横向拖动的开始状态*/
      onHorizontalDragStart: (startDetails) {
        print(startDetails.globalPosition);
      },

      /*横向拖动的结束状态*/
      onHorizontalDragEnd: (endDetails) {
        print(endDetails);
      },
      /*缩放开始状态*/
      onScaleStart: (startScaleDetails) {
        print(startScaleDetails);
      },
      /*缩放结束状态*/
      onScaleEnd: (endScaleDetails) {
        print(endScaleDetails);
      },
      child: new Container(
          color: Color.fromARGB(255, 220, 220, 220),
          child: new Center(
            child: new Text("Flutter手势"),
          )
      ),
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读