Question

Android上的ViewFlipper具有非常简单的API，可让您一次显示一个孩子列表中的视图。您还可以知道以编程方式向用户显示了哪种视图，以及在其过渡之间设置了动画，是否有一个小部件在Flutter中执行类似的操作？以下是getAttribute()文档的摘录。

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

Answer 1

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

一个在两个给定子代之间交叉淡化并进行动画处理的小部件本身在尺寸之间。

此小部件是增强的AnimatedSwitcher，与ViewFlipper类似，因为它通过插值大小和不透明度来负责根据状态在2个视图之间进行交换。

这是一个简单的AnimatedCrossFade的示例，该Containers可以在2个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'), ) ], ), ); } }中切换不同的颜色和大小。

const AppRouter = () => (
  <BrowserRouter>
    <div>
    <Header/>
    <Navigation/>
      <Switch>
        <Route path="/" component={LandingPage} exact={true} /> 
        <Route path="/xd" component={About} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>

    </div>
  </BrowserRouter>
);

它的局限性在于它只能在2个孩子之间淡入淡出，另外3个或更多孩子可以选择PageView。

Flutter上的Android ViewFlipper替代产品

1 个答案: