Flutter Draggable and DragTarget拖拽控件

本文主要介紹Flutter的Draggable和DragTarget，是一個能夠在屏幕上拖動的Widget。

Draggable

構造函數

Draggable(
  data: 4,
	///控制widget在拖動時，只能橫向
  //axis: Axis.horizontal,
	///中止的時候，顯示的widget(默認顯示)
  child:
	///正在拖動時，顯示的widget(拖動的手指處顯示的widget)
  feedback:
 	///拖動的時候，在原始位置展現的widget
  childWhenDragging: 
),
複製代碼

child默認顯示的widget；

feedback拖動時，手指位置顯示的widget

childWhenDraggingchild拖走後，原位置顯示的widget

其中axis控制拖拽的方向

axis: Axis.horizontal,

Callback

///開始拖拽
onDragStarted: () {
  print("----onDragStarted,開始拖拽");
},
///拖拽到DragTarget且接受的時候回調
onDragCompleted: () {
  print("----onDragCompleted,拖拽完成");
},
///沒有拖拽到DragTarget或拖拽沒有完成的回調
onDraggableCanceled: (v, offset) {
  print("----onDraggableCanceled,拖拽取消");
},
複製代碼

onDragStarted開始拖拽的時候的回調

onDragCompleted拖拽到Target且被接受時的回調

onDraggableCancled沒有拖拽到Target或Target沒有接受時的回調

DragTarget

構造函數

DragTarget(
  builder: (context, List<int> candidateData,
      List<dynamic> rejectedData) {
    ///candidateData，當Draggable被拖到DragTarget上的時候的data，已經準備好接受
    print("----candidateData" + candidateData.toString());

    ///rejectData，當Draggable被拖到DragTarget上的時候，不被接受
    print("----rejectedData" + rejectedData.toString());

    ///這兩個數據都是正拖到上面的時候，還沒放到上面，還沒鬆手
    return Center(
      child: Text(candidateData.toString() +
          "----" +
          rejectedData.toString()),
    );
  },
),
複製代碼

builder DragTarget的Widget構造函數，用於建立DragTarget顯示的Widget

Callback

///接收Draggable的data數據，判斷是否接收
  onWillAccept: (data) {
    print("----onWillAccept,拖拽" + data.toString() + "到target");
    if (data == 4) {
      return true;
    } else {
      return false;
    }
  },

  ///當拖到DragTarget的時候，鬆手後
  onAccept: (data) {
    print("----onAccept,接收" + data.toString());
    scaffoldKey.currentState
        .showSnackBar(SnackBar(content: Text(data.toString())));
  },

  ///拖到上面，沒有鬆手，又離開
  onLeave: (data) {
    print("----onLeave,離開" + data.toString());
  },
複製代碼

onWillAccept預判是否會接受這個Draggable

onAccept接受Draggable的回調

onLeaveDraggable拖拽到上可是沒有鬆開，直接離開的回調

github地址：

github.com/damengzai/f…

微信公衆號「Flutter入門」