Flutter实现List列表item拖动改变位置

最新推荐文章于 2025-05-29 19:06:41 发布

文艺范的世界

最新推荐文章于 2025-05-29 19:06:41 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter dart 文章标签： flutter dart

本文链接：https://blog.csdn.net/I123456789T/article/details/89184640

flutter 同时被 2 个专栏收录

12 篇文章

订阅专栏

dart

8 篇文章

订阅专栏

本文介绍了一种在Flutter中实现列表项拖拽排序的方法。通过使用ReorderableListView组件，结合Dart语言，可以轻松创建可拖动排序的列表。文章提供了完整的代码示例，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果吧：

喜欢上面的效果吗？实现代码如下：

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(
    MaterialApp(
      home: HomePage(),
    )
);

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List list = List.generate(Random().nextInt(20)+10, (i) => 'More Item$i');

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('listview reorded'),
      ),
      body: Center(
        child: ReorderableListView(
            children: list
                .map((m) => ListTile(
                key: ObjectKey(m),
                title: Text(m),
            )).toList(),//不要忘记 .toList()
            onReorder: _onReorder,
        ),
      ),
    );
  }

  _onReorder(int oldIndex, int newIndex){
    print('oldIndex: $oldIndex , newIndex: $newIndex');
      setState(() {
        if (newIndex == list.length){
          newIndex = list.length - 1;
        }
        var item = list.removeAt(oldIndex);
        list.insert(newIndex, item);
      });
  }
}

以上就是代码实现了，快去试试吧。。。