diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 49771c3..3514b57 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -20,20 +20,20 @@ - + - - + + - + - + @@ -57,13 +57,13 @@ - + @@ -203,7 +203,7 @@ - + @@ -212,12 +212,12 @@ + - @@ -229,6 +229,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -280,9 +322,6 @@ - - - @@ -290,9 +329,6 @@ - - - @@ -303,24 +339,24 @@ - + - + - + - - + + - + - - + + diff --git a/CHANGELOG.md b/CHANGELOG.md index bd472cb..2d253fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## [0.0.4] - 2018.09.30 + + Modify README description error and format code + ## [0.0.1] - 2018.09.30 Describe initial release. diff --git a/README.md b/README.md index 8047a4a..af3032f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# marquee +# DragableGridview [![pub package](https://img.shields.io/pub/v/dragablegridview_flutter.svg)](https://pub.dartlang.org/packages/dragablegridview_flutter) 用GridView编写的可拖动排序View，可任意拖动位置 @@ -16,7 +16,7 @@ MoreWidght：[https://github.com/OpenFlutter/PullToRefresh](https://github.com/O Add this to your package's pubspec.yaml file: dependencies: - dragablegridview_flutter: ^0.0.2 + dragablegridview_flutter: ^0.0.4 Add it to your dart file: diff --git a/lib/dragablegridview_flutter.dart b/lib/dragablegridview_flutter.dart index 00512bc..5465fd1 100644 --- a/lib/dragablegridview_flutter.dart +++ b/lib/dragablegridview_flutter.dart @@ -1,4 +1,5 @@ library dragablegridview; + import 'dart:async'; import 'package:dragablegridview_flutter/dragablegridviewbin.dart'; @@ -6,8 +7,7 @@ import 'package:flutter/material.dart'; typedef CreateChild = Widget Function(int position); -class DragAbleGridView extends StatefulWidget{ - +class DragAbleGridView extends StatefulWidget { final CreateChild child; final List itemBins; final int crossAxisCount; @@ -19,20 +19,16 @@ class DragAbleGridView extends StatefulWidget{ final EdgeInsets itemPadding; final Decoration decoration; - DragAbleGridView({ @required this.child, @required this.itemBins, - this.crossAxisCount:4, - this.childAspectRatio:1.0, - this.mainAxisSpacing:0.0, - this.crossAxisSpacing:0.0, + this.crossAxisCount: 4, + this.childAspectRatio: 1.0, + this.mainAxisSpacing: 0.0, + this.crossAxisSpacing: 0.0, this.itemPadding, this.decoration, - }) :assert( - child!=null, - itemBins!=null, - ); + }) : assert(child != null, itemBins != null,); @override State createState() { @@ -40,9 +36,9 @@ class DragAbleGridView extends StatefulWidget{ } } -class DragAbleGridViewState extends State with SingleTickerProviderStateMixin{ - - var physics=new ScrollPhysics(); +class DragAbleGridViewState + extends State with SingleTickerProviderStateMixin { + var physics = new ScrollPhysics(); double screenWidth; double screenHeight; //在拖动过程中Item position 的位置记录 @@ -65,111 +61,130 @@ class DragAbleGridViewState extends StateendPosition){ - for(int i=endPosition; i endPosition) { + for (int i = endPosition; i < startPosition; i++) { //图标向右 下移动 - if((i+1)%widget.crossAxisCount==0){ - widget.itemBins[itemPositions[i]].lastTimePositionX = -(screenWidth-itemWidth ) * 1+widget.itemBins[itemPositions[i]].lastTimePositionX; - widget.itemBins[itemPositions[i]].lastTimePositionY = (itemHeight + widget.mainAxisSpacing) * 1+widget.itemBins[itemPositions[i]].lastTimePositionY ; - }else { - widget.itemBins[itemPositions[i]].lastTimePositionX = (itemWidth + widget.crossAxisSpacing) * 1+widget.itemBins[itemPositions[i]].lastTimePositionX ; + if ((i + 1) % widget.crossAxisCount == 0) { + widget.itemBins[itemPositions[i]].lastTimePositionX = + -(screenWidth - itemWidth) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionX; + widget.itemBins[itemPositions[i]].lastTimePositionY = + (itemHeight + widget.mainAxisSpacing) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionY; + } else { + widget.itemBins[itemPositions[i]].lastTimePositionX = + (itemWidth + widget.crossAxisSpacing) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionX; } } - }else{ - for(int i=startPosition+1;i<=endPosition;i++){ + } else { + for (int i = startPosition + 1; i <= endPosition; i++) { //图标向左 上移动 - if(i%widget.crossAxisCount==0){ - widget.itemBins[itemPositions[i]].lastTimePositionX = (screenWidth-itemWidth ) * 1+widget.itemBins[itemPositions[i]].lastTimePositionX; - widget.itemBins[itemPositions[i]].lastTimePositionY = -(itemHeight + widget.mainAxisSpacing) * 1+widget.itemBins[itemPositions[i]].lastTimePositionY; - }else{ - widget.itemBins[itemPositions[i]].lastTimePositionX = -(itemWidth + widget.crossAxisSpacing) * 1+widget.itemBins[itemPositions[i]].lastTimePositionX; + if (i % widget.crossAxisCount == 0) { + widget.itemBins[itemPositions[i]].lastTimePositionX = + (screenWidth - itemWidth) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionX; + widget.itemBins[itemPositions[i]].lastTimePositionY = + -(itemHeight + widget.mainAxisSpacing) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionY; + } else { + widget.itemBins[itemPositions[i]].lastTimePositionX = + -(itemWidth + widget.crossAxisSpacing) * 1 + + widget.itemBins[itemPositions[i]].lastTimePositionX; } } } return; } setState(() { - - if(startPosition>endPosition){ - for(int i=endPosition; i endPosition) { + for (int i = endPosition; i < startPosition; i++) { //图标向右 下移动 - if((i+1)%widget.crossAxisCount==0){ - widget.itemBins[itemPositions[i]].dragPointX = -(screenWidth-itemWidth ) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionX; - widget.itemBins[itemPositions[i]].dragPointY = (itemHeight + widget.mainAxisSpacing) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionY ; - }else { - widget.itemBins[itemPositions[i]].dragPointX = (itemWidth + widget.crossAxisSpacing) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionX ; + if ((i + 1) % widget.crossAxisCount == 0) { + widget.itemBins[itemPositions[i]].dragPointX = + -(screenWidth - itemWidth) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionX; + widget.itemBins[itemPositions[i]].dragPointY = + (itemHeight + widget.mainAxisSpacing) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionY; + } else { + widget.itemBins[itemPositions[i]].dragPointX = + (itemWidth + widget.crossAxisSpacing) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionX; } } - }else{ - for(int i=startPosition+1;i<=endPosition;i++){ + } else { + for (int i = startPosition + 1; i <= endPosition; i++) { //图标向左 上移动 - if(i%widget.crossAxisCount==0){ - widget.itemBins[itemPositions[i]].dragPointX = (screenWidth-itemWidth ) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionX; - widget.itemBins[itemPositions[i]].dragPointY = -(itemHeight + widget.mainAxisSpacing) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionY; - }else{ - widget.itemBins[itemPositions[i]].dragPointX = -(itemWidth + widget.crossAxisSpacing) * animation.value+widget.itemBins[itemPositions[i]].lastTimePositionX; + if (i % widget.crossAxisCount == 0) { + widget.itemBins[itemPositions[i]].dragPointX = + (screenWidth - itemWidth) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionX; + widget.itemBins[itemPositions[i]].dragPointY = + -(itemHeight + widget.mainAxisSpacing) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionY; + } else { + widget.itemBins[itemPositions[i]].dragPointX = + -(itemWidth + widget.crossAxisSpacing) * animation.value + + widget.itemBins[itemPositions[i]].lastTimePositionX; } } } }); }); - animation.addStatusListener((animationStatus){ - if(animationStatus==AnimationStatus.completed){ + animation.addStatusListener((animationStatus) { + if (animationStatus == AnimationStatus.completed) { setState(() {}); - isRest=true; + isRest = true; controller.reset(); - isRest=false; + isRest = false; - int dragPosition=itemPositions[startPosition]; + int dragPosition = itemPositions[startPosition]; itemPositions.removeAt(startPosition); itemPositions.insert(endPosition, dragPosition); - startPosition=endPosition; - - }else if(animationStatus==AnimationStatus.forward){ - - } + startPosition = endPosition; + } else if (animationStatus == AnimationStatus.forward) {} }); _initItemPositions(); } - void _initItemPositions(){ - itemPositions=new List(); - for(int i=0;i extends State extends State0.0) { - x=-1; - } else if(dragPointX > 0.0&&updateDetail.delta.dx<0.0){ - x=1; + if (dragPointX < 0.0 && updateDetail.delta.dx > 0.0) { + x = -1; + } else if (dragPointX > 0.0 && updateDetail.delta.dx < 0.0) { + x = 1; } return x; } - int onDragMoreThanWidthX(int index,double xBlankPlace,double dragPointX){ + int onDragMoreThanWidthX(int index, double xBlankPlace, double dragPointX) { int x; if (dragPointX < 0.0) { - x=(dragPointX+xBlankPlace)~/(itemWidthChild+xBlankPlace); - x=x-1; + x = (dragPointX + xBlankPlace) ~/ (itemWidthChild + xBlankPlace); + x = x - 1; } else { - x=(dragPointX-xBlankPlace)~/(itemWidthChild+xBlankPlace); - x=x+1; + x = (dragPointX - xBlankPlace) ~/ (itemWidthChild + xBlankPlace); + x = x + 1; } return x; } - int onDragLessThanWidthY(int index,double dragPointY,DragUpdateDetails updateDetail){ - int y=index; - int a=itemPositions.indexOf(index); - if(index~/widget.crossAxisCount==a~/widget.crossAxisCount){ + int onDragLessThanWidthY( + int index, double dragPointY, DragUpdateDetails updateDetail) { + int y = index; + int a = itemPositions.indexOf(index); + if (index ~/ widget.crossAxisCount == a ~/ widget.crossAxisCount) { return index; } - if(dragPointY<0.0&&updateDetail.delta.dy>0.0){ - y=index-widget.crossAxisCount; - }else if(dragPointY>0.0&&updateDetail.delta.dy<0.0){ - y=index+widget.crossAxisCount; + if (dragPointY < 0.0 && updateDetail.delta.dy > 0.0) { + y = index - widget.crossAxisCount; + } else if (dragPointY > 0.0 && updateDetail.delta.dy < 0.0) { + y = index + widget.crossAxisCount; } return y; } - int onDragMoreThanWidthY(int index,double yBlankPlace,double dragPointY){ + int onDragMoreThanWidthY(int index, double yBlankPlace, double dragPointY) { int y; - if(dragPointY<0.0){ - y=index+(dragPointY+yBlankPlace)~/(itemHeightChild+yBlankPlace)*widget.crossAxisCount; - y=y-widget.crossAxisCount; - }else{ - y=index+(dragPointY-yBlankPlace)~/(itemHeightChild+yBlankPlace)*widget.crossAxisCount; - y=y+widget.crossAxisCount; + if (dragPointY < 0.0) { + y = index + + (dragPointY + yBlankPlace) ~/ + (itemHeightChild + yBlankPlace) * + widget.crossAxisCount; + y = y - widget.crossAxisCount; + } else { + y = index + + (dragPointY - yBlankPlace) ~/ + (itemHeightChild + yBlankPlace) * + widget.crossAxisCount; + y = y + widget.crossAxisCount; } return y; } + void onFingerPause(int index, double dragPointX, double dragPointY, + DragUpdateDetails updateDetail) async { + double xBlankPlace = theMarginsOfParentWid * 2 + widget.crossAxisSpacing; + double yBlankPlace = theMarginsOfParentHei * 2 + widget.mainAxisSpacing; - void onFingerPause(int index,double dragPointX,double dragPointY,DragUpdateDetails updateDetail) async{ - double xBlankPlace=theMarginsOfParentWid*2+widget.crossAxisSpacing; - double yBlankPlace=theMarginsOfParentHei*2+widget.mainAxisSpacing; - - double xMaxCoverageArea=itemWidthChild*(1-areaCoverageRatio)+itemWidthChild; - double xMinCoverageArea=itemWidthChild*areaCoverageRatio; - double yMaxCoverageArea=itemHeightChild*(1-areaCoverageRatio)+itemHeightChild; - double yMinCoverageArea=itemHeightChild*areaCoverageRatio; + double xMaxCoverageArea = + itemWidthChild * (1 - areaCoverageRatio) + itemWidthChild; + double xMinCoverageArea = itemWidthChild * areaCoverageRatio; + double yMaxCoverageArea = + itemHeightChild * (1 - areaCoverageRatio) + itemHeightChild; + double yMinCoverageArea = itemHeightChild * areaCoverageRatio; ////X轴的距离至少被拖动到相邻Item上时 - bool xAtLeastToAdjacentItem=dragPointX.abs()>xBlankPlace; - bool yAtLeastToAdjacentItem=dragPointY.abs()>yBlankPlace; + bool xAtLeastToAdjacentItem = dragPointX.abs() > xBlankPlace; + bool yAtLeastToAdjacentItem = dragPointY.abs() > yBlankPlace; //X轴的拖动距离大于1/3Width 且小于2/3Width - bool xTransferAbleIfLessThanW=dragPointX.abs()>xMinCoverageArea - &&dragPointX.abs()yMinCoverageArea - &&dragPointY.abs() xMinCoverageArea && + dragPointX.abs() < xMaxCoverageArea; + bool yTransferAbleIfLessThanH = dragPointY.abs() > yMinCoverageArea && + dragPointY.abs() < yMaxCoverageArea; //X轴的距离至少被拖动到相邻Item上时，并求得是否在某个Item上 - bool xTransferAbleIfMoreThanW=xAtLeastToAdjacentItem - &&(dragPointX.abs()-xBlankPlace)%(itemWidthChild+xBlankPlace)>xMinCoverageArea - &&(dragPointX.abs()-xBlankPlace)%(itemWidthChild+xBlankPlace)yMinCoverageArea - &&(dragPointY.abs()-yBlankPlace)%(itemHeightChild+yBlankPlace)0){ + bool xTransferAbleIfMoreThanW = xAtLeastToAdjacentItem && + (dragPointX.abs() - xBlankPlace) % (itemWidthChild + xBlankPlace) > + xMinCoverageArea && + (dragPointX.abs() - xBlankPlace) % (itemWidthChild + xBlankPlace) < + xMaxCoverageArea; + bool yTransferAbleIfMoreThanH = yAtLeastToAdjacentItem && + (dragPointY.abs() - yBlankPlace) % (itemHeightChild + yBlankPlace) > + yMinCoverageArea && + (dragPointY.abs() - yBlankPlace) % (itemHeightChild + yBlankPlace) < + yMaxCoverageArea; + + if (xTransferAbleIfLessThanW || + yTransferAbleIfLessThanH || + xTransferAbleIfMoreThanW || + yTransferAbleIfMoreThanH) { + int y = 0; + int x = 0; + + if (yTransferAbleIfLessThanH && yAtLeastToAdjacentItem) { + if (dragPointY > 0) { //item在下侧 - if(updateDetail.delta.dy>0){ + if (updateDetail.delta.dy > 0) { //向下滑 - y=onDragMoreThanWidthY(index,yBlankPlace,dragPointY); - }else{ + y = onDragMoreThanWidthY(index, yBlankPlace, dragPointY); + } else { //向上滑 - y=onDragLessThanWidthY(index,dragPointY,updateDetail); + y = onDragLessThanWidthY(index, dragPointY, updateDetail); } - }else{ + } else { //item在上侧 - if(updateDetail.delta.dy>0){ + if (updateDetail.delta.dy > 0) { //向下滑 - y=onDragLessThanWidthY(index,dragPointY,updateDetail); - }else{ + y = onDragLessThanWidthY(index, dragPointY, updateDetail); + } else { //向上滑 - y=onDragMoreThanWidthY(index,yBlankPlace,dragPointY); + y = onDragMoreThanWidthY(index, yBlankPlace, dragPointY); } } - }else if(yTransferAbleIfLessThanH){ - y=onDragLessThanWidthY(index,dragPointY,updateDetail); - }else if(yTransferAbleIfMoreThanH){ - y=onDragMoreThanWidthY(index,yBlankPlace,dragPointY); - }else if(yAtLeastToAdjacentItem - &&((dragPointY.abs()-yBlankPlace)%(itemHeightChild+yBlankPlace)yMaxCoverageArea)){ - //TODO 还有一种情况就是 ，X轴可移动，Y轴不可移动(Y轴小于1/5的高度，或大于4/5的高度)，但是Y轴有高度，这时要将Y轴的高度算上 - y=onDragMoreThanWidthY(index,yBlankPlace,dragPointY); - }else{ + } else if (yTransferAbleIfLessThanH) { + y = onDragLessThanWidthY(index, dragPointY, updateDetail); + } else if (yTransferAbleIfMoreThanH) { + y = onDragMoreThanWidthY(index, yBlankPlace, dragPointY); + } else if (yAtLeastToAdjacentItem && + ((dragPointY.abs() - yBlankPlace) % (itemHeightChild + yBlankPlace) < + yMinCoverageArea || + (dragPointY.abs() - yBlankPlace) % + (itemHeightChild + yBlankPlace) > + yMaxCoverageArea)) { + // 还有一种情况就是 ，X轴可移动，Y轴不可移动(Y轴小于1/5的高度，或大于4/5的高度)，但是Y轴有高度，这时要将Y轴的高度算上 + y = onDragMoreThanWidthY(index, yBlankPlace, dragPointY); + } else { //要考虑到一种情况，就是只有X轴可移动，Y轴不可移动，这时 - y=index; + y = index; } - - if(xTransferAbleIfLessThanW&&xAtLeastToAdjacentItem){ + if (xTransferAbleIfLessThanW && xAtLeastToAdjacentItem) { //这里要判断最后一次是滑向哪个方向,先根据dragPointX判断是在左边还是右边，再根据delta.dx判断是左滑还是右滑 - if(dragPointX>0){ + if (dragPointX > 0) { //item在右侧 - if(updateDetail.delta.dx>0){ + if (updateDetail.delta.dx > 0) { //向右滑 - x=onDragMoreThanWidthX(index,xBlankPlace,dragPointX); - }else{ + x = onDragMoreThanWidthX(index, xBlankPlace, dragPointX); + } else { //向左滑 - x=onDragLessThanWidthX(index,dragPointX,yTransferAbleIfLessThanH||yTransferAbleIfMoreThanH,updateDetail); + x = onDragLessThanWidthX( + index, + dragPointX, + yTransferAbleIfLessThanH || yTransferAbleIfMoreThanH, + updateDetail); } - }else{ + } else { //item在左侧 - if(updateDetail.delta.dx>0){ + if (updateDetail.delta.dx > 0) { //向右滑 - x=onDragLessThanWidthX(index,dragPointX,yTransferAbleIfLessThanH||yTransferAbleIfMoreThanH,updateDetail); - }else{ + x = onDragLessThanWidthX( + index, + dragPointX, + yTransferAbleIfLessThanH || yTransferAbleIfMoreThanH, + updateDetail); + } else { //向左滑 - x=onDragMoreThanWidthX(index,xBlankPlace,dragPointX); + x = onDragMoreThanWidthX(index, xBlankPlace, dragPointX); } } - }else if(xTransferAbleIfLessThanW){ - x=onDragLessThanWidthX(index,dragPointX,yTransferAbleIfLessThanH||yTransferAbleIfMoreThanH,updateDetail); - }else if(xTransferAbleIfMoreThanW){ - x=onDragMoreThanWidthX(index,xBlankPlace,dragPointX); - }else if(xAtLeastToAdjacentItem&& - ((dragPointX.abs()-xBlankPlace)%(itemWidthChild+xBlankPlace)>xMinCoverageArea - ||(dragPointX.abs()-xBlankPlace)%(itemWidthChild+xBlankPlace) + xMinCoverageArea || + (dragPointX.abs() - xBlankPlace) % + (itemWidthChild + xBlankPlace) < + xMaxCoverageArea)) { + // 还有一种情况就是 ，X轴不可移动(X轴小于1/5的宽度，或大于4/5的宽度)，Y轴可移动，但是X轴有宽度，这时要将X轴的宽度算上 + x = onDragMoreThanWidthX(index, xBlankPlace, dragPointX); } - if(endPosition!=x+y - &&!controller.isAnimating - &&x+y=0 - &&widget.itemBins[index].dragAble){ - endPosition=x+y; - _future=controller.forward(); + if (endPosition != x + y && + !controller.isAnimating && + x + y < widget.itemBins.length && + x + y >= 0 && + widget.itemBins[index].dragAble) { + endPosition = x + y; + _future = controller.forward(); } } } Future _future; - void onPanEndEvent(index)async { - widget.itemBins[index].dragAble=false; - if(controller.isAnimating){ + void onPanEndEvent(index) async { + widget.itemBins[index].dragAble = false; + if (controller.isAnimating) { await _future; } setState(() { List itemBi = new List(); T bin; for (int i = 0; i < itemPositions.length; i++) { - bin=widget.itemBins[itemPositions[i]]; + bin = widget.itemBins[itemPositions[i]]; bin.dragPointX = 0.0; bin.dragPointY = 0.0; bin.lastTimePositionX = 0.0; @@ -454,4 +534,3 @@ class DragAbleGridViewState extends State homepage: https://github.com/baoolong/DragableGridview