Flutter教學目錄持續更新中
Github源代碼持續更新中
1.Draggable介紹
拖拽組件
2.Draggable屬性
- child：子組件，未進行拖拽時顯示
- feedback：跟隨拖拽的組件
- data：用于對DragTarget傳遞data
- axis：Axis 拖拽方向，可以設置只能橫向或者縱向拖拽
- childWhenDragging：拖拽時child子組件顯示樣式
- feedbackOffset = Offset.zero：
- dragAnchor = DragAnchor.child：拖拽的錨地位置
- ignoringFeedbackSemantics = true：當子child和feedback為同一個Widget時，可以設為false配合GlobalKey確保是同一個Widget 減少繪制
- affinity：此部件與其它手勢的競爭方式 在非affinity方向上不響應拖動事件,一般用于在滾動組件
- maxSimultaneousDrags：同時支持拖動多少個點
- onDragStarted：拖動開始時調用
- onDraggableCanceled：在沒有被DragTarget接受的情況下松開draggable時調用
- onDragEnd：拖動結束時調用
- onDragCompleted：Draggable被刪除并被DragTarget接受時調用
DragTarget組件下一節再講，這是可以用來接受feedback的組件?
3.使用
body: Center(
child: Draggable(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
feedback: Container(
color: Colors.red,
width: 100,
height: 100,
),
childWhenDragging: Container(
color: Colors.amber,
width: 100,
height: 100,
),
feedbackOffset: Offset(0, 10),
dragAnchor: DragAnchor.child,
onDragStarted: () {
print("onDragStarted");
},
onDragEnd: (DraggableDetails details) {
print("onDragEnd : $details");
},
onDraggableCanceled: (Velocity velocity, Offset offset) {
print('onDraggableCanceled velocity:$velocity,offset:$offset');
},
onDragCompleted: () {
print('onDragCompleted');
},
),
),?
未拖拽.png
拖拽中.png
下一節：Draggable組件之DragTarget
