Flutter Listview 排序动画

Question

我想用动画对列表视图进行排序。当用户点击按钮时，按钮的优先级会自动更改。然后我想对Listview进行排序。目前，我使用 setState 并且动画是不可能的。用户无法看到哪个小部件与另一个小部件发生了更改。

我已经尝试过这些库；

• https://pub.dev/packages/smooth_sort#documentation
• Flutter 列表项通过动画改变位置

Answer 1

更新：2023 年 10 月 24 日

包

implicitly_animated_reorderable_list package

已复活为animated_list_plus

---

原答案：

我知道您正在寻找类似的东西？

这是用 implicitly_animated_reorderable_list 包制作的。

在我看来，工作非常顺利和直接。 该包装还附带一个列表，也可以手动重新排序。

这是 gif 中的代码：

import 'package:flutter/material.dart';
import 'package:implicitly_animated_reorderable_list/implicitly_animated_reorderable_list.dart';
import 'package:implicitly_animated_reorderable_list/transitions.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ListItem> listItems = _listItems;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('ImplicitlyAnimatedList Example '),
        ),
        body: ImplicitlyAnimatedList<ListItem>(
            items: listItems,
            itemBuilder: (context, animation, item, index) =>
                SizeFadeTransition(
                  sizeFraction: 0.7,
                  animation: animation,
                  key: Key(item.label),
                  child: ListTile(
                    leading: item.icon,
                    title: Text(item.label),
                  ),
                ),
            areItemsTheSame: (a, b) => a.label == b.label),
        floatingActionButton: FloatingActionButton.extended(
            icon: const Icon(Icons.swap_vert),
            onPressed: () => setState(() {
                  listItems.shuffle();
                }),
            label: const Text('sort')));
  }
}

final List<ListItem> _listItems = [
  ListItem(
    label: 'list item 1',
    icon: const Icon(Icons.ac_unit),
  ),
  ListItem(
    label: 'list item 2',
    icon: const Icon(Icons.access_alarm),
  ),
  ListItem(
    label: 'list item 3',
    icon: const Icon(Icons.accessibility),
  ),
  ListItem(
    label: 'list item 4',
    icon: const Icon(Icons.account_box),
  ),
  ListItem(
    label: 'list item 5',
    icon: const Icon(Icons.add_call),
  ),
  ListItem(
    label: 'list item 6',
    icon: const Icon(Icons.add_task),
  ),
  ListItem(
    label: 'list item 7',
    icon: const Icon(Icons.airplanemode_active),
  ),
];

class ListItem {
  final String label;
  final Icon icon;

  ListItem({
    required this.label,
    required this.icon,
  });
}