Flutter 手势组件

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,
    ),
)