Flutter 手势组件
GestureDetector
点击相关
GestureDetector(
onTapDown: (TapDownDetails details) {
print("按下");
},
onTapUp: (TapUpDetails details) {
print("抬起");
},
onTapCancel: () {
print("点击取消");
},
onTap: () {
print("点击");
},
onDoubleTap: () {
print("双击");
},
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
长按相关
GestureDetector(
onLongPressStart: (LongPressStartDetails details) {
print("长按开始");
},
onLongPress: () {
print("长按回调");
},
onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
print("长按移动");
},
onLongPressUp: () {
print("长按抬起");
},
onLongPressEnd: (LongPressEndDetails details) {
print("长按结束");
},
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
拖动相关
GestureDetector(
onVerticalDragDown: (DragDownDetails details) {
print("垂直拖动按下");
},
onVerticalDragStart: (DragStartDetails details) {
print("垂直拖动开始");
},
onVerticalDragUpdate: (DragUpdateDetails details) {
print("垂直拖动移动");
},
onVerticalDragCancel: () {
print("垂直拖动取消");
},
onVerticalDragEnd: (DragEndDetails details) {
print("垂直拖动结束");
},
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
缩放相关
GestureDetector(
onScaleStart: (ScaleStartDetails details) {
print("缩放开始");
},
onScaleUpdate: (ScaleUpdateDetails details) {
print("缩放更新中");
},
onScaleEnd: (ScaleEndDetails details) {
print("缩放结束");
},
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
InkWell & Ink
InkWell组件可以在用户点击是出现水波纹效果。
Ink组件可以将水波纹效果作用在装饰上。
InkWell(
onTap: () {},
splashColor: Colors.red,
child: const Padding(
padding: EdgeInsets.all(10),
child: Text("InkWell效果"),
),
),
Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFFDE2F21), Color(0xFFEC592F)],
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
child: Text(
"Ink效果",
style: TextStyle(color: Colors.white),
),
),
),
)
Listener
Listener是一个监听指针事件的控件,比如按下、移动、释放、取消等指针事件。
Listener(
onPointerDown: (PointerDownEvent event) {
print("按下");
},
onPointerMove: (PointerMoveEvent event) {
print("移动");
},
onPointerUp: (PointerUpEvent event) {
print("抬起");
},
onPointerCancel: (PointerCancelEvent event) {
print("取消");
},
child: Container(
width: 200,
height: 200,
color: Colors.blue,
alignment: Alignment.center,
),
)