Flutter Listview 排序动画

Posted 2023-02-23

【中文标题】Flutter Listview 排序动画

【英文标题】：Flutter Listview Sort Animation

【发布时间】：2021-10-27 16:51:17

【问题描述】：

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

我已经尝试过这些库；

https://pub.dev/packages/smooth_sort#documentation Flutter list items change position with animation

【问题讨论】：

如果我的回答对你有帮助，请将其标记为已接受的答案，谢谢 :-) ***.com/a/69132417/8539278

您看起来有点像可重新排序的列表视图 (api.flutter.dev/flutter/material/ReorderableListView-class.html)，除了用户可以拖动任何东西，您可以使用 animatedReorderController.reorder(startIndex: 2: endIndex 0) 之类的东西触发动画，并且你会在列表中看到列表项——不是消失和重新出现，而是做一个翻译动画？

@BenjaminLee 是的，我想做一个翻译动画

我不知道有任何当前的颤振包可以做到这一点。一个想法（尽管需要一些努力）是创建 ReorderableListView 的修改版本。另一个问题是：您的列表是否有预期的最大尺寸？试图让动画感觉正确，即使它遍历 100 个项目也会很棘手......

我只显示10个项目，我只需要显示项目位置变化动画

【参考方案1】：

我知道您正在寻找这样的东西？

这是用implicitly_animated_reorderable_list package 制作的。

在 imo 上工作得非常流畅和直接。 该软件包还附带一个可以手动重新排序的列表。

这是来自 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,
  );

【讨论】：

感谢您的帮助，我解决了我的问题，您的回答