主要用的知識(shí)點(diǎn)：Draggable，DragTarget，GridView

只需要傳一個(gè)圖片數(shù)組就可以使用，代碼如下：

import 'package:flutter/material.dart';
import 'package:yp_erp/Page/Procurement_page/model/procurement_model.dart';
import 'package:image_picker/image_picker.dart';

typedef DeleteCallBack = void Function(GoodsImageModel model);
typedef TakePhotoCallBack = void Function(Map imageInfo);

class DragGridViewBuild extends StatefulWidget {
  List<GoodsImageModel> images; // 圖片數(shù)組
  GoodsImageModel movingValue; // 記錄正在移動(dòng)的數(shù)據(jù)
  DeleteCallBack deleteAction; // 刪除
  TakePhotoCallBack takePhotoAction; // 拍照
  DragGridViewBuild(
      {this.images,
      this.movingValue,
      this.deleteAction,
      this.takePhotoAction,
      Key key})
      : super(key: key);

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

class _DragGridViewBuildState extends State<DragGridViewBuild> {
  @override
  Widget build(BuildContext context) {
    return _buildGridView();
  }

  // 創(chuàng)建GridView
  Widget _buildGridView() {
    return GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 12,
        crossAxisSpacing: 12,
        childAspectRatio: 1,
      ),
      children: _buildItems(),
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
    );
  }

// 生成GridView的items
  List<Widget> _buildItems() {
    List<Widget> items = [];
    for (GoodsImageModel value in widget.images) {
      items.add(_buildDragAbleItem(value));
    }
    // 最多是5張圖片，不顯示拍照按鈕（這里可根據(jù)自己需求，設(shè)置最大上傳圖片的數(shù)量）
    if (widget.images.length < 5) {
      items.add(_buildTakePhotoBtn());
    }

    return items;
  }

// 生成可拖動(dòng)的item
  Widget _buildDragAbleItem(GoodsImageModel value) {
    return Draggable(
      data: value,
      child: DragTarget(
        // candidateData為onWillAccept回調(diào)為true時(shí)可接收的數(shù)據(jù)列表，rejectedData為onWillAccept回調(diào)為false時(shí)拒絕時(shí)的數(shù)據(jù)列表
        builder: (context, candidateData, rejectedData) {
          return _buildBaseItem(value);
        },
        // 當(dāng)拖拽錨點(diǎn)進(jìn)入DragTarget范圍時(shí)回調(diào)，true時(shí)會(huì)將Data數(shù)據(jù)添加到candidateData列表中；false時(shí)會(huì)將Data數(shù)據(jù)添加到rejectedData列表中
        onWillAccept: (moveData) {
          var accept = moveData != null;
          if (accept) {
            _exchangeItemAction(
                {'moveData': moveData, 'toData': value, 'onAccept': false});
          }
          return accept;
        },
        // 接收Data數(shù)據(jù)，只有onWillAccept返回true且拖拽結(jié)束時(shí)拖拽錨點(diǎn)位于DragTarget內(nèi)才會(huì)回調(diào)
        onAccept: (moveData) {
          _exchangeItemAction(
              {'moveData': moveData, 'toData': value, 'onAccept': true});
        },
      ),
      // feedback: 跟隨手指移動(dòng)的視圖
      feedback: SizedBox(
        width: 100,
        height: 100,
        child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(4)),
          child: Image.network(
            value.url,
            fit: BoxFit.cover,
          ),
        ),
      ),
      onDragStarted: () {
        // 開始拖拽
        _onDragStartedAction(value);
      },
      onDraggableCanceled: (Velocity velocity, Offset offset) {
        //清空標(biāo)記，進(jìn)行重新繪制
        _onDraggableCanceledAction();
      },
      onDragCompleted: () {
        //清空標(biāo)記，進(jìn)行重新繪制
        _onDraggableCanceledAction();
      },
    );
  }

  Widget _buildBaseItem(GoodsImageModel value) {
    if (value.url == widget.movingValue.url) {
      // 如果當(dāng)前移動(dòng)的和之前的是同一個(gè)值，顯示空白
      return Container();
    }
    return Stack(
      children: [
        SizedBox(
          width: 88,
          height: 88,
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(4)),
            child: Image.network(
              value.url,
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          child: GestureDetector(
            onTap: () {
              if (widget.deleteAction != null) {
                widget.deleteAction(value);
              }
            },
            behavior: HitTestBehavior.translucent,
            child: Image.asset('images/drag_delete.png', height: 16, width: 16),
          ),
          top: 4,
          right: 8,
        )
      ],
    );
  }

// 拍照的item
  Widget _buildTakePhotoBtn() {
    return GestureDetector(
      onTap: getImage,
      child: Image.asset(
        'images/add_goods_take_photo_gray.png',
      ),
    );
  }

//選擇相冊照片
  Future getImage() async {
    XFile image = await ImagePicker()
        .pickImage(source: ImageSource.camera, imageQuality: 60);
    if (widget.takePhotoAction != null) {
      widget.takePhotoAction({'imagePath': image});
    }
  }

// 開始拖拽 記錄開始拖拽的數(shù)據(jù)
  void _onDragStartedAction(GoodsImageModel model) {
    setState(() {
      widget.movingValue = model;
    });
  }

// 拖拽取消
  void _onDraggableCanceledAction() {
    setState(() {
      widget.movingValue = GoodsImageModel();
    });
  }

// 數(shù)據(jù)交換
  void _exchangeItemAction(Map info) {
    setState(() {
      var toIndex = widget.images.indexOf(info['toData']);
      var moveData = info['moveData'];
      var onAccept = info['onAccept'];
      widget.images.remove(moveData);
      widget.images.insert(toIndex, moveData);
      if (onAccept) {
        widget.movingValue = GoodsImageModel();
      }
    });
  }
}

說明：GoodsImageModel是自己的圖片模型，讀者可使用自己的模型！可以根據(jù)前面的文章，把Image.network換成自定義的widget,點(diǎn)擊圖片有預(yù)覽效果
圖片選擇用了一個(gè)三方插件image_picker

注：cv可直接用!!!! （幫忙點(diǎn)個(gè)贊唄）

初始狀態(tài) 只有一個(gè)拍照按鈕，沒有其他虛線框！

wecom-temp-b659e836d3c306f0fc869212e18c1bf7.png