Android 在 Flutter 上的 ViewFlipper 替代方案

Question

Android 上的ViewFlipper 有一个非常简单的 API，允许您一次显示子列表中的一个视图。您还能够知道以编程方式向用户显示什么视图，以及在其转换之间设置动画，在 Flutter 中是否有一个小部件可以类似地执行此操作？ 以下是

ViewFlipper

文档的摘录。

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

Answer 1

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

一个在两个给定的孩子之间交叉淡入淡出并动画的小部件 自己在他们的大小之间。

这个小部件是一个增强的 AnimatedSwitcher 并且类似于

ViewFlipper

因为它负责通过插入其大小和不透明度来根据状态在 2 个视图之间进行交换。

---

这是一个简单的

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。

Answer 2

您可以使用有状态小部件创建自定义逻辑：

// define controller for changing child
final ViewSwitcherController controller = ViewSwitcherController();

// custom ViewFlipper widget
ViewFlipper(controller: controller, children: [....]);

// change child sample
controller.setDisplayedChild(index);

viewflipper.dart

import 'package:flutter/cupertino.dart';

class ViewFlipper extends StatefulWidget {
  final List<Widget> children;
  final ViewSwitcherController controller;

  const ViewFlipper(
      {Key? key, required this.children, required this.controller})
      : super(key: key);

  @override
  State<ViewFlipper> createState() => _ViewFlipperState();
}

class _ViewFlipperState extends State<ViewFlipper> {
  @override
  void dispose() {
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.children[widget.controller.displayedChildIndex];
  }
}

class ViewSwitcherController extends ChangeNotifier {
  int displayedChildIndex = 0;

  void setDisplayedChild(int index) {
    displayedChildIndex = index;
    notifyListeners();
  }
}