Flutter Draggable and DragTarget拖拽控制元件

damengzai發表於2019-06-19
Flutter控制元件

本文主要介紹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

Draggable

其中axis控制拖拽的方向

axis: Axis.horizontal,

Draggable 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拖拽到上但是沒有鬆開，直接離開的回撥

Dragtarget

github地址：

github.com/damengzai/f…

微信公眾號“Flutter入門”

Flutter入門

相關文章