【Flutter】【ReorderableListView】有记忆的拖动list 元素

widget名字：

ReorderableListView

• ReorderableListView 每个widget 都需要已独立的KEY，用来记录该widget 的state

---

功能：

功能：

1. 拖动一个widget 移动到另外一个widget的上面或者是下面

---

使用实例和代码：

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
// import 'dart:js';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class Car {
  const Car({
    required this.name,
    required this.imageUrl,
  });

  final String name;
  final String imageUrl;
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //模型数组,图片的地址
  final List<Car> datas = [
    const Car(
      name: '保时捷918 Spyder',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '兰博基尼Aventador',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '法拉利Enzo',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: 'Zenvo ST1',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '迈凯伦F1',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '萨林S7',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '科尼赛克CCR',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '布加迪Chiron',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '轩尼诗Venom GT',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    ),
    const Car(
      name: '西贝尔Tuatara',
      imageUrl:
          'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   title: Text(widget.title),
        // ),
        body: ReorderableListView(
      onReorder: (int oldindex, int newindex) {
        //跳转完成之后的回调函数
        //将 oldindex的位置移动到 newindex

        setState(() {
          print("$oldindex to $newindex");
          if (oldindex < newindex) {
            //向下移动的情况,需要减去1，不然会index 溢出
            newindex -= 1;
          }
          Car redata = datas.removeAt(oldindex);
          datas.insert(newindex, redata);
        });
      },
      children: List.generate(
          datas.length,
          (index) => Container(
                key: ValueKey(index),//必须要有唯一的 不重复的key
                decoration: const BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                child: Card(
                  clipBehavior: Clip.antiAlias, //抗锯齿
                  // shape: RoundedRectangleBorder(
                  //     borderRadius: BorderRadius.circular(15)),//圆角，下面是图片无法实现圆角功能
                  elevation: 10,

                  child: Image.network(
                    datas[index].imageUrl,
                    loadingBuilder: (context, child, loadingProgress) {
                      if (loadingProgress == null) {
                        return child;
                      }
                      return const CupertinoActivityIndicator();
                    },
                    fit: BoxFit.contain,
                  ),
                ),
              )),
    )



        );
  }
}

---

截图：