[移动开发]Flutter Widget列表 Widget可拖动更换位置 GridView图片列表

**```Dart
// GridView 可拖动Widget列表
import ‘package:flutter/material.dart’;

typedef DraggableResultBlock = void Function(
List imageList);

// ignore: must_be_immutable
class CustomPhotosListView extends StatefulWidget {
final List widgetList;//视图列表
int lastTargetIndex = 0;
double widgetWidth;
int crossAxisCount;
ScrollController photoScroll;
DraggableResultBlock draggableResultBlock;
double crossAxisSpacing;
double mainAxisSpacing;

CustomPhotosListView(
this.widgetList, {
Key key,
this.photoScroll,
this.lastTargetIndex = 0,
this.widgetWidth = 80,
this.crossAxisCount = 4,
this.draggableResultBlock,
this.crossAxisSpacing = 8,
this.mainAxisSpacing = 8,
}) : super(key: key);

@override
_CustomPhotosListViewState createState() => _CustomPhotosListViewState();
}

class _CustomPhotosListViewState extends State {
@override
Widget build(BuildContext context) {
return buildProduct();
}

Widget buildProduct() {
widget.photoScroll = ScrollController();

return GridView.count(
  physics: const NeverScrollableScrollPhysics(),
  crossAxisCount: widget.crossAxisCount,
  mainAxisSpacing: widget.mainAxisSpacing,
  crossAxisSpacing: widget.crossAxisSpacing,
  childAspectRatio: 1.0,
  controller: widget.photoScroll,
  children: widget.widgetList
      .asMap()
      .keys
      .map((index) => buildDraggableItem(index))
      .toList(),
);

}

// 获取可滑动视图数量
int getCanCount() {
int canCount = 0;
if (widget.widgetList.isNotEmpty) {
for (var item in widget.widgetList) {
if (item.canLongPressDraggable == true) {
canCount += 1;
}
}
}
return canCount;
}

Widget buildDraggableItem(int index) {
CustomGridViewModel model = widget.widgetList[index];
bool state = true;
//只有1个可滑动视图 | 设定不可滑动 = 取消滑动
if (model.canLongPressDraggable == false || getCanCount() <= 1) {
state = false;
}

return state == false
    ? (model.customWidget ?? Container())
    : LongPressDraggable(
        //  传递给 DragTarget 的数据
        data: index,
        //  拖动时跟随移动的 widget 添加边框
        feedback: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                border: Border.all(
                    color: const Color.fromRGBO(92, 192, 159, 1), width: 1),
              ),
              child: model.customWidget,
            ) ??
            Container(),
        child: DragTarget<int>(
          builder: (context, data, rejects) {
            return model.customWidget ?? Container();
          },
          // 手指拖着一个widget从另一个widget头上滑走时会调用
          onLeave: (data) {
            // print('---$data is Leaving item $index---');
          },
          onMove: (details) {
            // print('---onMove---');
          },
          // 松手时，是否需要将数据给这个widget，因为需要在拖动时改变UI，所以在这里直接修改数据源
          onWillAccept: (data) {
            if ((index - widget.lastTargetIndex).abs() >=
                widget.crossAxisCount) {
              widget.photoScroll.jumpTo(
                  ((index / widget.crossAxisCount).ceil() - 1) *
                      widget.widgetWidth); // 80为item高度 拖动item 滚动视图 根据需要处理
             setState(() {
                widget.lastTargetIndex = index;
              });
            }
            return true;
          },
          onAccept: (data) {
            //  松手时交换数据并刷新 UI
            setState(() {
              final dragTemp = widget.widgetList[index];
              final targetTemp = widget.widgetList[data];

              if (index != data) {
                widget.widgetList.replaceRange(data, data + 1, [dragTemp]);
                widget.widgetList
                    .replaceRange(index, index + 1, [targetTemp]);

                if (widget.draggableResultBlock != null) {
                  widget.draggableResultBlock(widget.widgetList);
                }
              }
            });
          },
        ),
      );

}
}

class CustomGridViewModel {
Widget customWidget; //自定义widget
// 是否可拖动
bool canLongPressDraggable = false;

CustomGridViewModel({
this.customWidget,
this.canLongPressDraggable = false,
});
}

阅读世界，共赴山海

423全民读书节，邀你共读