手势控制
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'),),
);
},
),
);
}
}