[Flutter] 可拖拽的流式布局

可拖拽的流式布局

说明

本次实现的可拖拽的瀑布流布局，使用的是flutter_staggered_grid_view库，其他流式布局可详细这个库可以让gridview的item自由排列等等。

拖拽功能是使用的官方组件Draggable和DragTarget，详细代码可以看demo。
本文完整示例demo

瀑布流布局介绍

Widget waterFall() {
    double spacing = 6;
    ///自由排布的gridview
    return MasonryGridView.count(
      crossAxisCount: 2,
      itemCount: urlList.length,
        ///listWidget()返回的是一个拥有每个item的list。
      itemBuilder: (BuildContext context, int index) => listWidget()[index],
      mainAxisSpacing: spacing,
      crossAxisSpacing: spacing,
    );
  }


///单个item
Container(
    ///瀑布流布局核心代码
    height: index.isEven ? 200 : 250,
    child: Image.network(
        urlList[index],
        fit: BoxFit.cover,
    ),
);

拖拽Draggable介绍

除了里面的feedback还有很多回调方法。

///把单个item包裹上LongPressDraggable
Widget itemWidget(int index) {
    return LongPressDraggable(
        data: index,
        ///组件拖拽的回调
        child: DragTarget<int>(
          onAccept: (data) {
            setState(() {
                ///tem保存当前列表项，删除当前列表项，插入保存的列表项tem
              final tem = urlList[data];
              urlList.remove(tem);
              urlList.insert(index, tem);
            });
          },
          builder: (context, candidateData, rejectedData) {
              ///item代码
            return Container(
              ///瀑布流布局核心代码
              height: index.isEven ? 200 : 250,
              child: Image.network(
                urlList[index],
                fit: BoxFit.cover,
              ),
            );
          },
        ),

        ///拖拽时候显示的组件
        feedback: Container(
          width: (MediaQuery.of(context).size.width - 10) / 2,
          height: index.isEven ? 200 : 250,
          child: Image.network(
            urlList[index],
            fit: BoxFit.cover,
          ),
        ));
  }