Flutter中如何解决`AnimatedCrossFade`设计效率低下的问题？

Question

一个问题AnimatedCrossFade是您必须提供两个孩子，即使只显示其中一个。

如果这些孩子中的一个（或两个）既复杂又笨重，则效率不高。

我曾试图提供一个Builder作为一个孩子，像这样：

AnimatedCrossFade(
    firstChild: widget1,
    secondChild: Builder(builder: widget2builder),
    duration: const Duration(milliseconds: 500),
    crossFadeState: toggle ? CrossFadeState.showFirst : CrossFadeState.showSecond,
),

var widget2builder = (context) {
  print("Building widget 2");
  return Container(),
  );
};

但是，这会立即打印Building widget 2，即使第一个小部件是正在显示的小部件，因此根本不需要小部件 2。

这是一个完整的、可运行的示例：

import 'package:flutter/material.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 = true;
  }

  @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: UniqueKey(),
      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 widget2builder = (context) {
      print("Building widget 2.");
      return Container(
        key: UniqueKey(),
        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>[
            toggleButton,
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text("Some text above."),
                AnimatedCrossFade(
                  firstChild: widget1,
                  secondChild: Builder(builder: widget2builder),
                  duration: const Duration(milliseconds: 500),
                  crossFadeState: toggle ? CrossFadeState.showFirst : CrossFadeState.showSecond,
                ),
                const Text("Some text below."),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

如果你运行它，你会看到它Building widget 2被打印到控制台，但显示的是小部件 1。

我的问题：

• 是否有任何理由AnimatedCrossFade构建它不使用的小部件？

• 我怎样才能防止这个问题并AnimatedCrossFade有效地使用？

Answer 1

我想在 R\xc3\xa9mi\ 的答案中添加一点，在提出这个问题后，我发布了一个包来解决它，名为AnimatedSizeAndFade：

\n\n

https://pub.dev/packages/animated_size_and_fade

\n\n

它与其他类似小部件相比如何：

\n\n

\n

• 使用 AnimatedCrossFade 时，您必须同时保留 firstChild 和 secondaryChild，而对于 AnimatedSizeAndFade 则不需要。

\n

• 使用 AnimatedSwitcher，您可以简单地更改其子级，但它只会对淡入淡出进行动画处理，而不对大小进行动画处理。

\n

• 除非您提前知道子级的大小，否则 AnimatedContainer 也不起作用。

\n

\n

Answer 2

这是预期的行为。

正如 dart 团队所述，您应该build随时调用该方法。 build其设计成本低廉且无副作用。

构建小部件这一事实并不意味着它会呈现在屏幕上。Opacity不透明度为 0 实际上缩短了绘制过程（并且在完全不透明时还有其他优化）。

如果这会导致问题，那么您应该改用在AnimatedSwitcher替换其子项时播放动画。