flutter-两个列表之间元素拖拽
2021-04-09 本文已影响0人
浮华_du
- 首先需要完成一个GridView内的元素拖拽交换位置;
- 然后解决两个GridView之间拖拽的数据问题.(ListView同理)
class CategoriesDragTestPage extends StatefulWidget {
CategoriesDragTestPage({Key key}) : super(key: key);
@override
_CategoriesDragTestPageState createState() => _CategoriesDragTestPageState();
}
class _CategoriesDragTestPageState extends State<CategoriesDragTestPage> {
List<String> _data1List = ["1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7"];
List<String> _data2List = ["2-1", "2-2", "2-3", "2-4", "2-5", "2-6", "2-7"];
int _data1WillAcceptIndex = -1;
bool _data1howItemWhenCovered = false; //手指覆盖的地方，即item被拖动时 底部的那个widget是否可见；
List<String>
_data1ListBackup; //数据源备份，在拖动时 会直接在数据源上修改 来影响UI变化，当拖动取消等情况，需要通过备份还原
int _data2WillAcceptIndex = -1;
bool _data2howItemWhenCovered = false; //手指覆盖的地方，即item被拖动时 底部的那个widget是否可见；
List<String>
_data2ListBackup; //数据源备份，在拖动时 会直接在数据源上修改 来影响UI变化，当拖动取消等情况，需要通过备份还原
int startData1Index = -1;
int startData2Index = -1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
child: Column(children: [
Container(
height: ScreenUtil().screenHeight / 2,
child: GridView.builder(
itemCount: _data1List.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, index) {
return _createImg1Widget(index);
}),
),
Expanded(
child: GridView.builder(
itemCount: _data2List.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, index) {
return _createImg2Widget(index);
}),
),
]),
));
}
Widget _createImg1Widget(int index) {
return LongPressDraggable(
data: index,
child: DragTarget<int>(
//松手时 如果onWillAccept返回true 那么就会调用，本案例不使用。
onAccept: (int data) {},
//绘制widget
builder: (context, data, rejects) {
return _data1WillAcceptIndex >= 0 && _data1WillAcceptIndex == index
? null
: _itemWidget(_data1List[index]);
},
// 手指拖着一个widget从另一个widget头上滑走时会调用
onLeave: (data) {
print('1===$data is Leaving item $index');
if (startData2Index != -1) {
startData2Index = -1;
return;
}
_data1WillAcceptIndex = -1;
setState(() {
_data1howItemWhenCovered = false;
_data1List = _data1ListBackup;
});
},
//接下来松手 是否需要将数据给这个widget 因为需要在拖动时改变UI，所以在这里直接修改数据源
onWillAccept: (int fromIndex) {
print('1===$index will accept item $fromIndex');
bool accept = false;
if (fromIndex < _data1List.length && startData2Index == -1) {
//本列表内移动
if (_data1WillAcceptIndex != -1) {
fromIndex = _data1WillAcceptIndex;
}
final accept = fromIndex != index;
if (accept) {
_data1WillAcceptIndex = index;
_data1howItemWhenCovered = true;
_data1List = _data1ListBackup;
final fromData = _data1List[fromIndex];
setState(() {
_data1List.removeAt(fromIndex);
_data1List.insert(index, fromData);
print(_data1List);
});
}
} else {
accept = true;
//两个列表间的移动
if (accept) {
_data1WillAcceptIndex = index;
_data1howItemWhenCovered = true;
final fromData = _data2List[fromIndex];
setState(() {
_data2List.removeAt(fromIndex);
_data1List.insert(index, fromData);
});
}
}
_data1ListBackup = _data1List;
_data2ListBackup = _data2List;
return accept;
},
),
onDragStarted: () {
//开始拖动，备份数据源
_data1ListBackup = _data1List;
_data2ListBackup = _data2List;
startData1Index = index;
print('1===item $index ---------------------------onDragStarted');
},
onDraggableCanceled: (Velocity velocity, Offset offset) {
print(
'1===item $index ---------------------------onDraggableCanceled,velocity = $velocity,offset = $offset');
//拖动取消，还原数据源
setState(() {
_data1WillAcceptIndex = -1;
_data1howItemWhenCovered = false;
_data1List = _data1ListBackup;
startData1Index = -1;
_data2WillAcceptIndex = -1;
_data2howItemWhenCovered = false;
_data2List = _data2ListBackup;
});
},
onDragCompleted: () {
//拖动完成，刷新状态，重置willAcceptIndex
print("1===item $index ---------------------------onDragCompleted");
setState(() {
_data1howItemWhenCovered = false;
_data1WillAcceptIndex = -1;
startData1Index = -1;
_data2howItemWhenCovered = false;
_data2WillAcceptIndex = -1;
startData2Index = -1;
});
},
//用户拖动item时，那个给用户看起来被拖动的widget，（就是会跟着用户走的那个widget）
feedback: Container(
width: 80, height: 80, child: _itemWidget(_data1List[index])),
//这个是当item被拖动时，item原来位置用来占位的widget，（用户把item拖走后原来的地方该显示的就是这个）
childWhenDragging: Container(
child: SizedBox(
child:
_data1howItemWhenCovered ? _itemWidget(_data1List[index]) : null,
),
),
);
}
Widget _createImg2Widget(int index) {
return LongPressDraggable(
data: index,
child: DragTarget<int>(
//松手时 如果onWillAccept返回true 那么就会调用，本案例不使用。
onAccept: (int data) {},
//绘制widget
builder: (context, data, rejects) {
return _data2WillAcceptIndex >= 0 && _data2WillAcceptIndex == index
? null
: _itemWidget(_data2List[index]);
},
//手指拖着一个widget从另一个widget头上滑走时会调用
onLeave: (data) {
print('2===$data is Leaving item $index');
if (startData1Index != -1) {
startData1Index = -1;
return;
}
_data2WillAcceptIndex = -1;
setState(() {
_data2howItemWhenCovered = false;
_data2List = _data2ListBackup;
});
},
//接下来松手 是否需要将数据给这个widget 因为需要在拖动时改变UI，所以在这里直接修改数据源
onWillAccept: (int fromIndex) {
print('2===$index will accept item $fromIndex');
bool accept = false;
if (fromIndex < _data2List.length && startData1Index == -1) {
//本列表内移动
if (_data2WillAcceptIndex != -1) {
fromIndex = _data2WillAcceptIndex;
}
final accept = fromIndex != index;
if (accept) {
_data2WillAcceptIndex = index;
_data2howItemWhenCovered = true;
_data2List = _data2ListBackup;
final fromData = _data2List[fromIndex];
setState(() {
_data2List.removeAt(fromIndex);
_data2List.insert(index, fromData);
});
}
} else {
accept = true;
//两个列表间的移动
if (accept) {
_data2WillAcceptIndex = index;
_data2howItemWhenCovered = true;
final fromData = _data1List[fromIndex];
setState(() {
_data1List.removeAt(fromIndex);
_data2List.insert(index, fromData);
});
}
}
_data1ListBackup = _data1List;
_data2ListBackup = _data2List;
return accept;
},
),
onDragStarted: () {
//开始拖动，备份数据源
_data1ListBackup = _data1List;
_data2ListBackup = _data2List;
startData2Index = index;
print('2===item $index ---------------------------onDragStarted');
},
onDraggableCanceled: (Velocity velocity, Offset offset) {
print(
'2===item $index ---------------------------onDraggableCanceled,velocity = $velocity,offset = $offset');
//拖动取消，还原数据源
setState(() {
_data1WillAcceptIndex = -1;
_data1howItemWhenCovered = false;
_data1List = _data1ListBackup;
startData1Index = -1;
_data2WillAcceptIndex = -1;
_data2howItemWhenCovered = false;
_data2List = _data2ListBackup;
});
},
onDragCompleted: () {
//拖动完成，刷新状态，重置willAcceptIndex
print("2===item $index ---------------------------onDragCompleted");
setState(() {
_data1howItemWhenCovered = false;
_data1WillAcceptIndex = -1;
startData1Index = -1;
_data2howItemWhenCovered = false;
_data2WillAcceptIndex = -1;
startData2Index = -1;
});
},
//用户拖动item时，那个给用户看起来被拖动的widget，（就是会跟着用户走的那个widget）
feedback: Container(
width: 80, height: 80, child: _itemWidget(_data2List[index])),
//这个是当item被拖动时，item原来位置用来占位的widget，（用户把item拖走后原来的地方该显示的就是这个）
childWhenDragging: Container(
child: SizedBox(
child:
_data2howItemWhenCovered ? _itemWidget(_data2List[index]) : null,
),
),
);
}
Widget _itemWidget(String data) {
return Container(
decoration: BoxDecoration(
color: ColorUtils.parseColorString("#c9daf8"),
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
data,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.normal,
decoration:
TextDecoration.none), //, decoration: TextDecoration.none
),
);
}
}
