feat: 增加longdraggable‘

Author: yangshangzhi

docs/widget/gestures/longpressdraggable/index.md

@@ -1 +1,37 @@
-## ****
+## **LongPressDraggable**
+> 长按能拖动的组件，属性中child和feedback不能为空
+
+### 构造函数
+```
+LongPressDraggable<T>({
+  Key key,
+  @required Widget child,
+  @required Widget feedback,
+  T data,
+  Axis axis,
+  Widget childWhenDragging,
+  Offset feedbackOffset: Offset.zero,
+  DragAnchor dragAnchor: DragAnchor.child,
+  int maxSimultaneousDrags,
+  VoidCallback onDragStarted,
+  DraggableCanceledCallback onDraggableCanceled,
+  DragEndCallback onDragEnd,
+  VoidCallback onDragCompleted,
+  bool hapticFeedbackOnStart: true,
+  bool ignoringFeedbackSemantics: true
+})
+```
+
+### 属性介绍
+- child: 拖动目标子组件，可配合DragTarget使用
+- feedback: 拖动时跟随手势组件/提示内容
+- feedbackOffset: 以手势为中心的偏移量，会影响命中的目标
+- data: 定义下标，该值会在DragTarget中返回
+- axis: Axis.horizontal/Axis.vertical, 默认不限制，赋值后按照限制水平拖动或垂直拖动
+- childWhenDragging: 拖动时，可修改被拖动组件的内容。
+- onDragStarted: () {}, 拖动开始时回调
+- DragEndCallback: (detials) {}, 拖动结束时回调, 返回拖动相关属性
+- onDragCompleted: () {}, 完成拖动时回调
+- onDraggableCanceled: () {}， 拖动取消
+
+

lib/widget/gestures/index.dart

@@ -11,32 +11,32 @@ const nameSpaces = '/gestures_';
 List widgets = [
   ItemInfo(
     widget: absorbpointer.Index(),
-    code: 58348, // grid_on
+    code: 58320, // grid_on
     title: absorbpointer.Index.title,
   ),
   ItemInfo(
     widget: dismissible.Index(),
-    code: 58348, // grid_on
+    code: 58321, // grid_on
     title: dismissible.Index.title,
   ),
   ItemInfo(
     widget: dragtarget.Index(),
-    code: 58348, // grid_on
+    code: 58322, // grid_on
     title: dragtarget.Index.title,
   ),
   ItemInfo(
     widget: gesturedetector.Index(),
-    code: 58348, // grid_on
+    code: 58324, // grid_on
     title: gesturedetector.Index.title,
   ),
   ItemInfo(
     widget: ignorepointer.Index(),
-    code: 58348, // grid_on
+    code: 58325, // grid_on
     title: ignorepointer.Index.title,
   ),
   ItemInfo(
     widget: longpressdraggable.Index(),
-    code: 58348, // grid_on
+    code: 58326, // filter_6 
     title: longpressdraggable.Index.title,
   ),
 ];

lib/widget/gestures/longpressdraggable/demo.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 class Index extends StatefulWidget {
+  final List _list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].toList();
   @override
   State<StatefulWidget> createState() => _IndexState();
 }
@@ -17,9 +18,95 @@ class _IndexState extends State<Index> {
       appBar: AppBar(
         title: Text('LongPressDraggable'),
       ),
-      body: Center(
-        child: Text('更新中'),
+      body: GridView.count(
+        childAspectRatio: 1.5,
+        crossAxisCount: 3,
+        children: _renderWidget(),
+        padding: EdgeInsets.only(top: 10),
       ),
     );
   }
+
+  List<Widget> _renderWidget() {
+    final List list = List<Widget>();
+    for (int i = 0; i < widget._list.length; i++) {
+      list.add(_buildDragWidget(i));
+    }
+    return list;
+  }
+
+  Widget _buildDragWidget(int index) {
+    return LongPressDraggable(
+      data: index,
+      feedbackOffset: Offset(0, 0),
+      // axis: Axis.vertical,
+      child: DragTarget<int>(
+        onAccept: (data) {
+          print('accept index $data'); 
+          setState(() {
+            final temp = widget._list[data];
+            widget._list.remove(temp);
+            widget._list.insert(index, temp);
+          });
+        },
+        onWillAccept: (data) {
+          print("current index: $index, on will accept $data");
+          return true;
+        },
+        onLeave: (data) {
+          print('index $index , leave $data');
+        },
+        builder: (context, data, rejects) {
+          print('builder = $data,  rejects= $rejects');
+          return Container(
+            margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(4),
+              border: Border.all(
+                color: Colors.grey,
+              ),
+            ),
+            child: Text('index = ${widget._list[index]}'),
+          );
+        },
+      ),
+      feedback: SizedBox(
+        width: 80,
+        height: 40,
+        child: Container(
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(4),
+            border: Border.all(
+              color: Colors.grey,
+            ),
+          ),
+          child: Text(
+            'index=${widget._list[index]}',
+            style: TextStyle(
+              fontSize: 12,
+            ),
+          ),
+        ),
+      ),
+      onDragCompleted: () {
+        print('onDragCompleted');
+      },
+      onDragEnd: (details) {
+        print(
+            'onDragEnd ${details.wasAccepted} ${details.velocity} ${details.offset}');
+      },
+      onDragStarted: () {
+        print('onDragStarted');
+      },
+      // 拖动时替换原来位置的widget
+      // childWhenDragging: Center(
+      //   child: Icon(
+      //     Icons.ac_unit,
+      //     color: Colors.redAccent,
+      //   ),
+      // ),
+    );
+  }
 }

lib/widget/gestures/longpressdraggable/index.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
-// import 'demo.dart' as Demo;
+import 'demo.dart' as Demo;
 
 class Index extends StatefulWidget {
   static String title = 'LongPressDraggable';
@@ -19,7 +19,7 @@ class _IndexState extends State<Index> {
       originCodeUrl: Index.originCodeUrl,
       mdUrl: Index.mdUrl,
       demoChild: [
-        // Demo.Index(),
+        Demo.Index(),
       ],
     );
   }