Flutter 中的 Android ViewFlipper 替代方案答案

【问题标题】：Android's ViewFlipper alternative on FlutterFlutter 中的 Android ViewFlipper 替代方案
【发布时间】：2020-04-03 03:18:56
【问题描述】：

Android 上的ViewFlipper 有一个非常简单的 API，允许您一次显示来自子列表的视图。您还可以知道以编程方式向用户显示的视图，以及在其转换之间设置动画，在 Flutter 中是否有类似的小部件？以下是ViewFlipper 文档的摘录。

简单的 ViewAnimator 将在两个或多个视图之间进行动画处理已添加到其中。一次只显示一个孩子。如果请求，可以定期在每个孩子之间自动翻转间隔。

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

AnimatedCrossFade 是一种在 2 个视图之间交换的简单方法。

在两个给定子级和动画之间交叉淡入淡出的小部件本身在它们的大小之间。

这个小部件是一个增强的AnimatedSwitcher，类似于ViewFlipper，因为它负责根据状态通过插入其大小和不透明度来在两个视图之间交换。

这是一个简单的AnimatedCrossFade 示例，它在不同颜色和大小的 2 个Containers 之间切换。

class MySimpleWidget extends StatefulWidget {
  MySimpleWidget({Key key, this.title}) : super(key: key);

  final String title;

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

class _MySimpleWidgetState extends State<MySimpleWidget> {
  bool _showFirst = false;

  void _swapWidget() {
    setState(() {
      _showFirst = !_showFirst;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedCrossFade(
            crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
            firstChild: Container(color: Colors.red, width: 100, height: 50),
            secondChild: Container(color: Colors.blue, width: 100, height: 100),
            duration: const Duration(milliseconds: 500),
          ),
          MaterialButton(
            onPressed: _swapWidget,
            child: const Text('Swap widget'),
          )
        ],
      ),
    );
  }
}

它的限制是它只能在 2 个孩子之间交叉淡入淡出，3 个或更多孩子的替代品可以是PageView。

【讨论】：