【问题标题】：Flutter list items change position with animationFlutter 列表项随动画改变位置
【发布时间】：2021-06-12 03:17:00
【问题描述】：

以下代码有一个从 1 到 100 的列表，顶部有三个按钮来更改列表的顺序（增加、减少或随机播放）。

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

class SamplePage extends StatefulWidget {
  SamplePage({Key key}) : super(key: key);

  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  _SamplePageState();

  final _list = new List<int>.generate(100, (i) => i + 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextButton(
            onPressed: () => setState(() {
              _list.sort((a, b) => a.compareTo(b));
            }),
            child: Text(
              "Sort increasing",
            ),
          ),
          TextButton(
            onPressed: () => setState(() {
              _list.sort((a, b) => b.compareTo(a));
            }),
            child: Text(
              "Sort decreasing",
            ),
          ),
          TextButton(
            onPressed: () => setState(() {
              _list.shuffle();
            }),
            child: Text(
              "Shuffle",
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _list.length,
              itemBuilder: (context, index) => Text(
                '${_list[index]}',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

一切正常，但由于我是新来的颤振，我想知道是否可以使列表中的项目随着动画而改变。

在android世界上，我们可以通过RecyclerView适配器中的setHasStableIds来做到这一点，我想flutter的方法可能会有所不同，但我想有可能达到相同的结果，我想知道如何。

已编辑

我在这里添加了一个 gif，展示了当您使用原生 recyclerview 时项目如何以动画方式更改位置，我正在寻找这种位置的动画变化。

【问题讨论】：

标签： android flutter android-recyclerview flutter-animation

【解决方案1】：

我自己还没有测试过，但也许 AnimatedListView 可以解决问题。

https://api.flutter.dev/flutter/widgets/AnimatedList-class.html

但正如我自己所说的那样，我还没有测试过。

【讨论】：

【解决方案2】：

你需要使用：ReorderableListView和他的属性onReorder

ReorderableListView(
            children: list
                .map((m) => ListTile(
                key: ObjectKey(m),
                title: Text(m),
            )).toList(),
            onReorder: _onReorder,
        )

来源链接：https://www.programmersought.com/article/4678939801/

【讨论】：

这个想法不是重新排序列表，而是“随机播放”动画项目。我在问题中添加了一个 gif 以使其更清楚。
所以你需要使用动画列表。