flutter - 在 Flutter 中，我如何更改一些小部件并看到它以动画形式显示为新大小？

Question

我想更改某个小部件的子项，然后看到它根据新子项的高度进行动画处理，同时进行淡入淡出过渡。

我可以用 AnimatedCrossFade 做到这一点，但我必须同时保留 firstChild 和 secondChild，这是我做不到的。

如果我使用 AnimatedSwitcher，它可以让我简单地改变它的 child ，但它只会对淡入淡出进行动画处理，而不是对大小进行动画处理。

AnimatedContainer 也不起作用，因为我事先不知道子项的大小。

是否有一些我缺少的小部件可以满足我的需要，如果没有，我该如何在不求助于 AnimationController 的情况下做到这一点？

Answer 1

这解决了问题:

https://pub.dev/packages/animated_size_and_fade

它同时淡化和动画大小，无需指定两个 child 。您还可以分别为淡入淡出和大小定义持续时间和曲线。

像这样使用它:

bool toggle=true; 
Widget widget1 = ...;
Widget widget2 = ...;

AnimatedSizeAndFade(
    vsync: this,
    child: toggle ? widget1 : widget2,
),

注意:如果你想使用上面的代码，请务必阅读文档:

• “旧”和"new" child 的宽度必须相同，但高度可以不同。

• 如果"new"子组件与“旧”子组件类型相同，但参数不同，则 AnimatedSizeAndFade 将不会在它们之间进行转换，因为就框架而言，它们是同一个小部件，可以使用新参数更新现有小部件。要强制转换发生，请设置一个 Key(通常是一个 ValueKey，获取任何小部件数据，这些数据会改变您希望成为的每个子小部件上的小部件的视觉外观被认为是独一无二的。

---

这是一个可运行的例子:

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

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

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

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  bool toggle;

  @override
  void initState() {
    super.initState();
    toggle = false;
  }

  @override
  Widget build(BuildContext context) {
    var toggleButton = Padding(
      padding: const EdgeInsets.all(8.0),
      child: MaterialButton(
        child: const Text("Toggle"),
        color: Colors.grey,
        onPressed: () {
          setState(() {
            toggle = !toggle;
          });
        },
      ),
    );

    var widget1 = Container(
      key: ValueKey("first"),
      color: Colors.blue,
      width: 200.0,
      child: const Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "
            "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "
            "ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      ),
    );

    var widget2 = Container(
      key: ValueKey("second"),
      color: Colors.red,
      width: 200.0,
      child: const Text(
        "I am ready for my closeup.",
      ),
    );

    return MaterialApp(
      home: Material(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(height: 100.0),
            toggleButton,
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text("Some text above."),
                AnimatedSizeAndFade(
                  vsync: this,
                  child: toggle ? widget1 : widget2,
                  fadeDuration: const Duration(milliseconds: 300),
                  sizeDuration: const Duration(milliseconds: 600),
                ),
                const Text("Some text below."),
              ],
            ),
          ],
        ),
      ),
    );
  }
}