09Flutter--手势控制

Posted 2021-06-25

手势控制

Flutter中提供手势检测为GestureDetector。手势系统分为两层，第一层是触摸原事件（指针），有相应的四种事件类型：

PointerDownEvent：用户与屏幕接触产生了联系。
PointerMoveEvent：手指已从屏幕上的一个位置移动到另一个位置。
PointerUpEvent：用户已停止接触屏幕。
PointerCancelEvent：此指针的输入不再指向此应用程序。

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

GestureDetector手势

GestureDetector可以进行手势检测，比如点击一次、双击、长按、垂直拖动及水平拖动等。

事件名	描述
onTapDown	点击屏幕立即触发此方法
onTapUp	手指离开屏幕
onTap	点击屏幕
onTapCancel	此次点击事件结果，onTapDown不会再产生点击事件
onDoubleTap	用户快速连续两次在同一个位置点击屏幕
onLongPress	长时间保持与相同位置的屏幕接触
onVerticalDragStart	与屏幕接触，可能会开始垂直移动
onVerticalDragUpdate	与屏幕接触并垂直移动的指针在垂直方向上移动
onVerticalDragEnd	之前与屏幕接触并垂直移动的指针不再与屏幕接触，并且停止接触屏幕时以特定速度移动垂直拖动
onHorizontalDragStart	与屏幕接触，可能开始水平移动
onHorizontalDragUpdate	与屏幕接触并水平移动的指针在水平方向上移动
onHorizontalDragEnd	先前与屏幕接触并且水平移动的指针不再与屏幕接触，并且当它停止接触屏幕时以特定速度移动水平拖动

假设我们想要制作一个自定义按钮，当点击时显示文字‘你已按下’。请看下面示例代码：

import \'package:flutter/material.dart\';
void main() => runApp(
  MaterialApp(
    title: \'GestureDetector示例\',
    home: MyApp(),
  )
);
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(\'GestureDetector示例\'),),
      body: Center(child: MyButton(),),
    );
  }
}
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 一定要把触摸的组件放在GestureDetector里面
    return GestureDetector(
      onTap: (){
        // 底部消息提示
        final snackBar = new SnackBar(content: Text(\'你已按下\'));
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // 添加容器接收触摸动作
      child: Container(
        padding: EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Text(\'测试按钮\'),
      ),
    );
  }
}

Dismissible滑动删除

滑动删除模式在移动应用中很常见，Flutter通过提供Dismissible组件使这项任务变得简单。

属性名	类型	说明
onDismissed	DismissDirectionCallback	当包裹的组件消失后回调的函数
movementDuration	Duration	定义组件消息的时长
onResize	VoidCallBack	组件大小改变时回调的函数
resizeDuration	Duration	组件大小改变时长
child	Widget	组件包裹的子元素，即被隐藏的对象

编写一个示例，可以删除列表中某一项数据。其中关键部分是列表项需要使用Dismissible包裹。

import \'package:flutter/material.dart\';
void main() => runApp(
  MaterialApp(
    title: \'Dismissible滑动删除\',
    home: MyApp(),
  )
);
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    List<String> items = new List.generate(30, (index) => "列表项 ${index + 1}");
    return Scaffold(
      appBar: AppBar(title: Text(\'Dismissible滑动删除\'), centerTitle: true,),
      // 构建列表
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index){ // 构建列表
          // 提取出被删除的项
          final item = items[index];
          // 返回一个可以被删除的列表项
          return Dismissible(
            key: Key(item),
            // 被删除回调
            onDismissed: (direction){
              // 移除制定索引项
              items.removeAt(index);
              // 底部弹出消息提示当前项被删除
              Scaffold.of(context).showSnackBar(SnackBar(content: Text(\'$item被删除了\'),));
            },
            child: ListTile(title: Text(\'$item\'),),
          );
        },
      ),
    );
  }
}