flutter ListView做拖动排序

Flutter的ListView组件是一种非常常见的列表布局组件，但是它默认是不支持拖动排序的。不过我们可以通过一些技巧来实现拖动排序的功能。

具体实现思路如下：

创建一个ListView组件，并通过itemBuilder属性构建出列表项。
在列表项上添加一个GestureDetector组件，用于监听手势事件。
当手指在列表项上按下时，记录下按下的位置，并将该列表项的位置记录到一个变量中。
当手指在列表项上移动时，根据手指的移动距离，将该列表项拖动到新的位置上。
当手指松开时，将该列表项的位置更新，并更新ListView的数据源。

下面是一个简单的示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drag and Drop ListView Demo',
      home: DragAndDropListView(),
    );
  }
}

class DragAndDropListView extends StatefulWidget {
  @override
  _DragAndDropListViewState createState() => _DragAndDropListViewState();
}

class _DragAndDropListViewState extends State<DragAndDropListView> {
  List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
  ];

  int _draggingIndex = -1;
  double _draggingOffset = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop ListView Demo'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onVerticalDragStart: (details) {
              _draggingIndex = index;
              _draggingOffset = 0.0;
            },
            onVerticalDragUpdate: (details) {
              setState(() {
                _draggingOffset += details.delta.dy;
              });
            },
            onVerticalDragEnd: (details) {
              if (_draggingIndex != -1) {
                int newIndex = _draggingIndex + (_draggingOffset ~/ 50);
                newIndex = newIndex.clamp(0, items.length - 1);
                if (newIndex != _draggingIndex) {
                  setState(() {
                    items.insert(newIndex, items.removeAt(_draggingIndex));
                  });
                }
              }
              _draggingIndex = -1;
              _draggingOffset = 0.0;
            },
            child: Container(
              height: 50,
              color: _draggingIndex == index ? Colors.grey : Colors.white,
              child: Center(
                child: Text(items[index]),
              ),
            ),
          );
        },
      ),
    );
  }
}

在这个示例代码中，我们创建了一个包含10个字符串的列表，并通过ListView.builder将其渲染到屏幕上。

在每个列表项上，我们添加了一个GestureDetector组件，并监听了onVerticalDragStart、onVerticalDragUpdate和onVerticalDragEnd三个手势事件。

在onVerticalDragStart事件中，我们记录下按下的位置，并将该列表项的位置记录到_draggingIndex变量中。

在onVerticalDragUpdate事件中，我们根据手指的移动距离，将该列表项拖动到新的位置上，并将_draggingOffset变量记录下来。

在onVerticalDragEnd事件中，我们将_draggingIndex变量重置为-1，表示没有任何列表项正在被拖动。

最后，我们更新了ListView的数据源，通过调用setState方法来刷新列表的布局。这样就实现了一个简单的拖动排序的功能。