Flutter-gestureDetector的滑動事件小試

 

class _Drag extends StatefulWidget {
  @override
  _DragState createState() => new _DragState();
}

class _DragState extends State<_Drag> with SingleTickerProviderStateMixin {
  double _top = 0.0; //距頂部的偏移
  double _left = 0.0;//距左邊的偏移

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: _top,
          left: _left,
          child: GestureDetector(
            child: CircleAvatar(child: Text("A")),
            //手指按下時會觸發此回調
            onPanDown: (DragDownDetails e) {
              //打印手指按下的位置(相對於屏幕)
              print("用戶手指按下：${e.globalPosition}");
            },
            //手指滑動時會觸發此回調
            onPanUpdate: (DragUpdateDetails e) {
              //用戶手指滑動時，更新偏移，重新構建
              setState(() {
                _left += e.delta.dx;
                _top += e.delta.dy;
              });
            },
            onPanEnd: (DragEndDetails e){
              //打印滑動結束時在x、y軸上的速度
              print(e.velocity);
            },
          ),
        )
      ],
    );
  }
}

可以看到，滑動回調和點擊回調都類似，看回調名字就能知道是什么用的。

其中用的stack是為了在拖動時實時改變其在屏幕中的位置，利用onPanUpdate回調可以在拖動時改變圓的位置參數(_top/_left)。

然后就可以拖着這個圓到處移動了。