AnimatedSwitcher 在 ReorderableListView 中不起作用答案

【问题标题】：AnimatedSwitcher not working in ReorderableListViewAnimatedSwitcher 在 ReorderableListView 中不起作用
【发布时间】：2020-08-25 02:59:26
【问题描述】：

我试图让 AnimatedSwitcher 在 ReorderableListView 中工作，它在普通 ListView 中工作。我认为这与钥匙有关，但我现在确定了。

Flutter 1.17.0 • 频道测试版 • https://github.com/flutter/flutter.git 框架 • 修订版 e6b34c2b5c（7 天前） • 2020-05-02 11:39:18 -0700 引擎 • 修订版 540786dd51 工具• Dart 2.8.1

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ChangeNumber(),
      child: MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          body: SafeArea(
            child: Consumer<ChangeNumber>(
              builder: (context, value, child) {
                return Column(
                  children: <Widget>[
                    Container(
                      height: 100,
                      child: ReorderableListView(
                        onReorder: (oldIndex, newIndex) {},
                        children: <Widget>[
                          AnimatedSwitcher(
                            key: ValueKey(value.i),
                            duration: Duration(seconds: 1),
                            child: NumberTile(
                              number: value.i,
                              key: ValueKey(value.i),
                            ),
                          ),
                        ],
                      ),
                    ),
                    RaisedButton(
                      child: Text('Increase'),
                      onPressed: () => value.i = value.i + 1,
                    )
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

class NumberTile extends StatelessWidget {
  final int number;

  NumberTile({this.number, key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('$number'),
    );
  }
}

class ChangeNumber extends ChangeNotifier {
  int _i = 0;

  get i => _i;

  set i(int value) {
    _i = value;
    notifyListeners();
  }
}

【问题讨论】：

看起来您只是在更新一个数字，而不是为另一个小部件切换一个小部件。我不相信动画切换器会起作用，除非你用一个新的孩子替换 AnimatedSwitcher 的孩子。将您的 ReorderableListView 更改为 ListView 似乎不适用于上面的代码示例。
如果您使用 ListView 更改 ReorderedListView 并删除 AnimatedSwitcher 上的键，它将起作用。孩子：ListView（孩子：[AnimatedSwitcher（持续时间：持续时间（秒：1），孩子：NumberTile（数字：value.i，键：ValueKey（value.i），），），]，），跨度>

标签： flutter dart flutter-animation

【解决方案1】：

AnimatedSwitcher 不会在 Text 小部件上显示效果，因为您的 Text 在 ListTile 内 NumberTile 内。您必须将要为开关设置动画的直接小部件放置在AnimatedSwitcher 中。检查这个example

【讨论】：

实际上是：dartpad.dev/5b06dfbd75acf1fe3ff16415a6956987
这只是因为您将 Key 应用到 NumberTile 并且 ValueKey 为增量。这意味着带有 ValueKey(0) 的 NumberTile 与带有 ValueKey(1) 的 NumberTile 不同。所以 AnimatedSwitcher 认为那是一个不同的孩子。
如何使用 ReorderableListView 而不是 ListView 来实现这一点？
直接将Text放在AnimatedSwitcher中
这不是重点，这个例子只是为了说明问题。这仍然行不通。