Flutter动态排序列表插件animated_reorderable的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter动态排序列表插件animated_reorderable的使用

animated_reorderable 是一个方便的包装器，可以将 ListView 或 GridView 变成动画且可重新排序的组件。以下是其主要功能和用法示例。

功能

  • 支持 GridView 项目的重新排序。
  • 同时支持动画和重新排序。
  • 在添加或移除项目时，所有网格项目都会进行动画重定位。
  • 支持通过滑动手势删除项目。
  • 某些项目可以配置为不可重新排序。
  • 提供回调以跟踪项目拖动和滑动事件。
  • 除了程序化地启动动画添加和移除外，还可以程序化地触发重新排序。

使用方法

使用 AnimatedReorderable.list() 或 AnimatedReorderable.grid() 来分别包装 ListView 或 GridView。需要配置以下参数：

  • keyGetter: 必需参数，用于为唯一标识项目配置键。
  • onReorder: 如果要启用重新排序功能，请指定一个回调，在该回调中应对项目集合应用排列。

示例代码：包装 ListView

以下是一个如何包装 ListView 的示例代码：

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

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: ListViewExample(),
    ),
  ));
}

class ListViewExample extends StatefulWidget {
  const ListViewExample({super.key});

  @override
  State<ListViewExample> createState() => _ListViewExampleState();
}

class _ListViewExampleState extends State<ListViewExample> {
  final items = [1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) => AnimatedReorderable.list(
        // 配置 keyGetter 使用函数，
        // 该函数接受项目的索引并返回其唯一的键。
        keyGetter: (index) => ValueKey(items[index]),

        // 定义 onReorder 回调以同步项目的顺序。
        // 回调接收需要应用于项目集合的排列。
        onReorder: (permutations) => permutations.apply(items),

        listView: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) => Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Text('Item: ${items[index]}'),
            ),
          ),
        ),
      );
}

动态插入、删除或重新排序项目

AnimatedReorderableState 可用于动态插入、删除或重新排序项目。可以通过提供一个 GlobalKey 或使用静态 of 方法从项目的输入回调中引用 AnimatedReorderableState。更多展示请参见 Example 页面。

以上是 animated_reorderable 插件的基本使用方法和示例代码。希望这些信息对您有所帮助！


更多关于Flutter动态排序列表插件animated_reorderable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动态排序列表插件animated_reorderable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用animated_reorderable插件来实现动态排序列表的示例代码。这个插件允许你创建一个可以重新排序的列表，并且在排序过程中会有动画效果。

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

dependencies:
  flutter:
    sdk: flutter
  animated_reorderable: ^0.4.0  # 请确保使用最新版本

然后，运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用animated_reorderable插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Reorderable List Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List<String>.generate(10, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Reorderable List Example'),
      ),
      body: AnimatedReorderableListView(
        items: items,
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final String item = items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
        builder: (context, index, animation) {
          return SlideTransition(
            position: Tween<Offset>(
              begin: Offset.zero,
              end: const Offset(0, -0.1),
            ).animate(animation),
            child: ListTile(
              key: ValueKey(items[index]),
              title: Text(items[index]),
              trailing: Icon(Icons.drag_handle),
              onTap: () {}, // 可以在这里添加点击事件
            ),
          );
        },
      ),
    );
  }
}

代码解释：

  1. 依赖引入：

    • 在pubspec.yaml中添加animated_reorderable依赖。

  2. 应用入口：

    • MyApp类作为应用的入口，设置了主题并定义了主页为MyHomePage。

  3. 主页逻辑：

    • MyHomePage是一个StatefulWidget，它维护了一个包含10个字符串项的列表。

  4. 列表视图：

    • 使用AnimatedReorderableListView来创建可排序的列表视图。
    • items属性指定了列表中的项。
    • onReorder回调函数在项被重新排序时被调用，它使用setState方法来更新列表的顺序。
    • builder函数用于构建每个列表项，这里使用了SlideTransition和Tween来创建动画效果。

  5. 列表项：

    • 每个列表项使用ListTile构建，包含一个文本和一个拖拽手柄图标。

这个示例展示了如何使用animated_reorderable插件来创建一个具有动画效果的动态排序列表。你可以根据需要进一步自定义列表项的外观和行为。

回到顶部