ReorderableListView 可重排序列表

可以进行长按排序的ListView，可指定滑动方向、是否反向、滑动控制器等属性。

相关组件

ListView

ReorderableListView基本使用

   <br />【children】 : 子组件列表   【List<Widget>】<br />【header】 : 头部组件   【Widget】<br />【padding】 : 内边距   【EdgeInsets】<br />【onReorder】 : 调换时回调  【ReorderCallback】<br />![115.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589454543524-29406ac4-c151-4b92-8b91-25739d275d85.gif#align=left&display=inline&height=518&margin=%5Bobject%20Object%5D&name=115.gif&originHeight=518&originWidth=774&size=1248059&status=done&style=none&width=774)

import 'package:flutter/material.dart';
class CustomReorderableListView extends StatefulWidget {
  @override
  _CustomReorderableListViewState createState() => _CustomReorderableListViewState();
}
class _CustomReorderableListViewState extends State<CustomReorderableListView> {
  var data = <Color>[
    Colors.yellow[50],
    Colors.yellow[100],
    Colors.yellow[200],
    Colors.yellow[300],
    Colors.yellow[400],
    Colors.yellow[500],
    Colors.yellow[600],
    Colors.yellow[700],
    Colors.yellow[800],
    Colors.yellow[900],
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      child: ReorderableListView(
        padding: EdgeInsets.all(10),
        header: Container(
          color: Colors.blue,
          alignment: Alignment.center,
            height: 50,
            child: Text('长按拖拽进行换位',style: TextStyle(color: Colors.white),)),
        onReorder: _handleReorder,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }
  void _handleReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) {
      newIndex -= 1;
    }
    setState(() {
      final element = data.removeAt(oldIndex);
      data.insert(newIndex, element);
    });
  }
  Widget _buildItem(Color color) {
    return Container(
      key: ValueKey(color)  ,
      alignment: Alignment.center,
      height: 50,
      color: color,
      child: Text(
        colorString(color),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
        ]),
      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

ReorderableListView滑动方向

   <br />【scrollDirection】 : 滑动方向   【Axis】<br />【reverse】 : 是否反向  【bool】<br />![116.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589454614591-0e74a27f-a207-4aba-8409-8e491777fcd7.gif#align=left&display=inline&height=444&margin=%5Bobject%20Object%5D&name=116.gif&originHeight=444&originWidth=810&size=1185852&status=done&style=none&width=810)

import 'package:flutter/material.dart';
class DirectionReorderableListView extends StatefulWidget {
  @override
  _DirectionReorderableListViewState createState() => _DirectionReorderableListViewState();
}
class _DirectionReorderableListViewState extends State<DirectionReorderableListView> {
  var data = <Color>[
    Colors.yellow[50],
    Colors.yellow[100],
    Colors.yellow[200],
    Colors.yellow[300],
    Colors.yellow[400],
    Colors.yellow[500],
    Colors.yellow[600],
    Colors.yellow[700],
    Colors.yellow[800],
    Colors.yellow[900],
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ReorderableListView(
        scrollDirection: Axis.horizontal,
        reverse: false,
        onReorder: _handleReorder,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }
  void _handleReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) {
      newIndex -= 1;
    }
    setState(() {
      final element = data.removeAt(oldIndex);
      data.insert(newIndex, element);
    });
  }
  Widget _buildItem(Color color) {
    return Container(
      key: ValueKey(color)  ,
      alignment: Alignment.center,
      width: 80,
      color: color,
      child: Text(
        colorString(color),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
        ]),
      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}