Flutter ReorderableListView 示例

Question

任何人都可以展示如何制作这个吗？

Answer 1

您可以使用此代码。

class _HomePageState extends State<HomePage> {
  List<String> _list = List.generate(5, (i) => "${i}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ReorderableListView(
        padding: EdgeInsets.symmetric(horizontal: 40),
        children: _list.map((String string) => ListTile(key: Key(_list[_list.indexOf(string)]), title: Text(string))).toList(),
        onReorder: (oldIndex, newIndex) {
          String old = _list[oldIndex];
          if (oldIndex > newIndex) {
            for (int i = oldIndex; i > newIndex; i--) {
              _list[i] = _list[i - 1];
            }
            _list[newIndex] = old;
          } else {
            for (int i = oldIndex; i < newIndex - 1; i++) {
              _list[i] = _list[i + 1];
            }
            _list[newIndex - 1] = old;
          }
          setState(() {});
        },
      ),
    );
  }
}

Answer 2

另一种选择，而不是直接调整索引值：

 if (oldIndex < newIndex) {
   newIndex -= 1;
 }
 final int item = _items.removeAt(oldIndex);
 _items.insert(newIndex, item);

正如https://api.flutter.dev/flutter/material/ReorderableListView-class.html上的示例所示。