Flutter 手势篇

文章目录

  • 1 概述
  • 2 GestureDetector
  • 3 Dissmissible
  • 4 示例1-实现点击效果
  • 5 示例2-实现滑动删除

1 概述

Flutter中的手势分为两层,第一层是触摸原始指针(Pointer)事件,描述了屏幕上指针(如触摸、鼠标和触控笔)的位置和移动。
指针(Pointer)代表用户与屏幕交互的原始数据,有四种事件类型:

PointerDownEvent: 指针接触到屏幕
PointerMoveEvent: 指针从屏幕上的一个位置移动到另一个位置
PointerUpEvent: 指针停止接触屏幕
PointerCancelEvent: 指针的输入事件不再针对此应用(事件取消)

第二层就是我们可以检测到的手势,主要分为三大类:轻击、拖动和缩放。

2 GestureDetector

GestureDetector可以进行手势检测,如单击,双击,长按,垂直、水平拖动等。

GestureDetector事件描述

事件名 描述
onTapDown 点击屏幕立即触发
onTapUp 手指离开屏幕
onTap 点击屏幕
onTapCancel 点击事件结束,onTapDown不会再触发点击事件
onDoubleTap 快速连续两次在同一位置点击屏幕
onLongPress 长按
onVerticalDragStart 与屏幕接触,可能会开始垂直移动
onVerticalDragUpdate 与屏幕接触,已经沿垂直移动
onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动
onHorizontalDragStart 与屏幕接触,可能会开始水平移动
onHorizontalDragUpdate 与屏幕接触,已经沿水平移动
onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触,并在停止接触屏幕时以特定速度移动

3 Dissmissible

可用于实现滑动删除。

常见属性

属性名 类型 说明
onDismissed DismissDirectionCallback 当包裹的组件消失后回调
movementDuration Duration 定义组件消失的时长
onResize VoidCallback 组件大小改变时的回调
resizedDuration Duration 组件大小改变时长
child Widget 子元素,滑动时显示的组件

4 示例1-实现点击效果

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyButton(),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('onTap');
      },
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          color: Theme.of(context).buttonColor,
        ),
        padding: EdgeInsets.all(20.0),
        child: Text('MyButton'),
      ),
    );
  }
}

5 示例2-实现滑动删除

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  final List items = List.generate(20, (index) => 'item $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Dismissible(
              onDismissed: (_) {
                items.removeAt(index);
              },
              movementDuration: Duration(milliseconds: 100),
              key: Key(item),
              child: ListTile(
                title: Text('$item'),
              ),
              background: Container(color: Color(0xffff0000),),
          );
        },
      ),
    );
  }
}

你可能感兴趣的:(Flutter)