本节学习老孟《flutter 实战入门》
Flutter的手势系统油两层:第一层为原始指针(pointer)事件,包括指针的位置和移动;第二层为手势,手势由一个或者多个指针事件组成的语义动作,例如点击、拖动、缩放等。手势是系统封装了事件的结果,方便开发者进行开发。
一、GestureDetector
GestureDetector是手势识别组件。一个完整的手势包括多个事件,例如,点击事件包含指针按下、抬起事件。GestureDetector包含各种手势,例如点击、双击、长按、拖动、缩放等。
1、点击
点击手势包含按下、抬起、点击、点击取消事件。
在这里插入图片描述
点击调用顺序为:onTapDown->onTapUp->onTap。
按下后移动指针,调用顺序为:onTapDown->onTapCancel。

 body: GestureDetector(
      onTapDown: (TapDownDetails tapDownDetails) {
        print('onTapDown');
      },
      onTapUp: (TapUpDetails tapUpDetails) {
        print('onTapUp');
      },
      onTap: () {
        print('onTap');
      },
      onTapCancel: () {
        print('onTapCancel');
      },
      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),

2、双击
使用onDoubleTap事件进行监听。同时监听onTap和onDoubleTap事件,只会触发一个事件,如果监听onDoubleTap事件,那么onTap将会延迟触发,因为系统将会待一段事件再来判断是否为onDoubleTap事件。如果用户只监听了onTap事件,则没有延迟。

body: GestureDetector(
      onDoubleTap: () =>print('onDoubleTab'),

      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),

3、长按事件
在这里插入图片描述
用户按下-移动-抬起的过程调用顺序:onLongPressStart->onLongPress->onLongPressMoveUpdate->…->onLongPressMoveUpdate->onLongPressEnd->onLongPressUp.

 body: GestureDetector(
      onLongPressStart: (v)=>print('onLongPressStart'),
      onLongPress: ()=>print('onLongPress'),
      onLongPressMoveUpdate: (v)=>print('onLongPressMoveUpdate'),
      onLongPressEnd: (v)=>print('onLongPressEnd'),
      onLongPressUp: ()=>print('onLongPressUp'),


      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),

4、垂直/水平拖动事件
在这里插入图片描述
用户垂直方向拖动事件回调顺序为:onVerticalDragDown->onVerticalDragStart->onVerticalDragUpdate->…->onVerticalDragUpdate->onVerticalDragEnd.水平拖拽一样。

 body: GestureDetector(
      onVerticalDragDown: (v)=>print('onVerticalDragDown'),
      onVerticalDragStart: (v)=>print('onVerticalDragStart'),
      onVerticalDragUpdate: (v)=>print('onVerticalDragUpdate'),
      onVerticalDragEnd: (v)=>print('onVerticalDragEnd'),
      onVerticalDragCancel: ()=>print('onVerticalDragCancel'),
      
      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),

5、缩放
在这里插入图片描述

body: GestureDetector(
      onScaleStart: (v)=>print('onScaleStart'),
      onScaleUpdate: (v)=>print('onScaleUpdate'),
      onScaleEnd: (v)=>print('onScaleEnd'),

      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),

二、GestureRecognizer
GestureRecognizer本身不是一个Widget。

//按下字体为红色,放开为黄色
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

String _storageDir = '';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: GestureRecognizerDemo(),
    );
  }
}

class GestureRecognizerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _GestureRecognizerDemo();
    throw UnimplementedError();
  }
}

class _GestureRecognizerDemo extends State<GestureRecognizerDemo> {
  var _tapGestureRecognizer = TapGestureRecognizer();
  var _textColor = Colors.yellow;

  @override
  void initState() {
    super.initState();
    _tapGestureRecognizer..onTapDown = (v) {
      setState(() {
        _textColor = Colors.red;
      });
    };

    _tapGestureRecognizer..onTapUp = (v) {
      setState(() {
        _textColor = Colors.yellow;
      });
    };
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text.rich(
        TextSpan(children: <InlineSpan>[
          TextSpan(
            text: '你好,Flutter实战入门',
            style: TextStyle(color: _textColor,fontSize: 20),
            recognizer: _tapGestureRecognizer,
          )
        ])
      ),

    );
    throw UnimplementedError();
  }
  @override
  void dispose() {
    super.dispose();
    _tapGestureRecognizer.dispose();
  }
  
}

三、原始指针
Pointer是原始指针事件,GestureDetector和GestureRecognizer都是直接或者间接封装Poniters而实现的。Pointer通过控件Listener监听指针事件,Listener的指针类型如下:
在这里插入图片描述
当指针滑动的时候调用顺序:onPointerDown->onPointerMove->…->onPointerMove->onPointerUp
Listener控件是最原始的指针控件,一般情况下使用GestureDetector。当按下指针时,系统对应用程序执行“hit test”(命中测试),确定当前点击的位置包含哪些控件,然后系统将事件分发给检测到的控件树的最末尾节点,事件将从此节点开始向上传递,一直到根节点。

body: Listener(
      onPointerDown: (v)=>print('onPointerDown'),
      onPointerMove: (v)=>print('onPointerMove'),
      onPointerUp: (v)=>print('onPointerUp'),
      onPointerCancel: (v)=>print('onPointerCancel'),
      child: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.green,
        ),
      ),
    ),
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐