09Flutter--手势控制

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了09Flutter--手势控制相关的知识,希望对你有一定的参考价值。

手势控制

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\'),),
          );
        },
      ),
    );
  }
}

以上是关于09Flutter--手势控制的主要内容,如果未能解决你的问题,请参考以下文章

flutter web中如何区分手指触摸手势和鼠标指针手势?

Flutter 布局备忘录

flutter系列之:移动端的手势基础GestureDetector

错误记录Flutter 混合开发获取 BinaryMessenger 报错 ( FlutterActivityAndFragmentDelegate.getFlutterEngine() )(代码片段

Flutter手势--GestureDetector各种手势使用详情

Flutter了解之手势