Flutter可排序列表插件sortable_list的使用

Flutter可排序列表插件sortable_list的使用

SortableList 是一个 Flutter 列表组件，允许用户拖放列表项，并可以自定义拖动手柄。本文将详细介绍如何在 Flutter 应用程序中使用 SortableList。

获取开始

首先，确保你已经在项目的 pubspec.yaml 文件中添加了 sortable_list 依赖：

dependencies:
  sortable_list: ^latest_version

然后运行 flutter pub get 来安装该包。

接下来，我们将通过一个简单的示例来展示如何使用 SortableList。

基本用法

你可以通过以下方式将 SortableList 添加到你的应用中：

import 'package:flutter/material.dart';
import 'package:sortable_list/sortable_list.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('可排序列表示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SortableList<String>(
            items: ['Tuna', 'Meat', 'Cheese', 'Potato', 'Eggs', 'Bread'],
            itemExtent: 72.0,
            builder: (context, item, handle) {
              return Container(
                height: 72.0,
                child: Row(children: [
                  Spacer(),
                  Text(item),
                  Spacer(),
                  handle,
                ]),
              );
            },
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

自定义拖动手柄

除了默认的手柄，你还可以提供自定义的手柄构建器。例如：

child: SortableList<String>(
  items: ['Tuna', 'Meat', 'Cheese', 'Potato', 'Eggs', 'Bread'],
  itemExtent: 72.0,
  handleBuilder: (context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(
        color: Colors.green,
        child: Text('Handle'),
      ),
    );
  },
  builder: (context, item, handle) {
    return Container(
      height: 72.0,
      child: Row(children: [
        Spacer(),
        Text(item),
        Spacer(),
        handle,
      ]),
    );
  },
),

其他可选参数

SortableList 还提供了其他一些可选参数，如动画持续时间、拖动延迟、手柄对齐方式等。例如：

child: SortableList<String>(
  items: ['Tuna', 'Meat', 'Cheese', 'Potato', 'Eggs', 'Bread'],
  itemExtent: 72.0,
  builder: (context, item, handle) {
    return Container(
      height: 72.0,
      child: Row(children: [
        Spacer(),
        Text(item),
        Spacer(),
        handle,
      ]),
    );
  },
  animDuration: Duration(milliseconds: 500),
  dragDelay: Duration(seconds: 1),
  handleAlignment: -0.3,
  scrollDirection: Axis.horizontal,
  onItemReorder: (from, to) {
    // 处理重新排序事件
  },
),

无手柄模式

如果你希望列表项可以在任何地方被拖动，可以使用 handleless 构造函数：

SortableList<String>.handleless(
  items: ['Tuna', 'Meat', 'Cheese', 'Potato', 'Eggs', 'Bread'],
  itemExtent: 72.0,
  builder: (context, item) {
    return Container(
      height: 72.0,
      child: Center(child: Text(item)),
    );
  },
);

完整示例

下面是一个完整的示例代码，展示了如何使用 SortableList 创建一个可拖动的国家列表：

import 'package:sortable_list/sortable_list.dart';
import 'package:flutter/material.dart';

void main() => runApp(CountriesPage());

class CountriesPage extends StatelessWidget {
  final _itemHeight = 72.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SortableList example',
      home: Scaffold(
        appBar: AppBar(title: Text('最大国家列表')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: SortableList<String>(
            items: _countries,
            itemExtent: _itemHeight,
            handleBuilder: (_) => AnimatedIcon(
              icon: AnimatedIcons.menu_arrow,
              progress: AlwaysStoppedAnimation(0.0),
            ),
            feedbackHandleBuilder: (_, transition) => AnimatedIcon(
              icon: AnimatedIcons.menu_arrow,
              progress: transition,
            ),
            itemBuilder: (_, item, handle) => Container(
              height: _itemHeight,
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Row(children: [
                  Expanded(child: Center(child: Text(item.value))),
                  handle,
                ]),
              ),
            ),
          ),
        ),
      ),
    );
  }

  final _countries = [
    'Russia',
    'China',
    'United States',
    'Canada',
    'Brazil',
    'Australia',
    'India',
    'Argentina',
    'Kazakhstan',
    'Algeria',
    'DR Congo',
    'Saudi Arabia',
    'Mexico',
    'Indonesia',
    'Sudan',
    'Libya',
    'Iran',
    'Mongolia',
    'Peru',
    'Niger',
  ];
}