我如何在层次结构中，在后面的小组件上制作flutter小组件的动画？

Question

我有一个简单的屏幕，里面有两个小组件在一个 Column 小组件。当我点击顶部小组件时，我希望它向下移动到第二个小组件。这一部分是工作的，但是当它向下滑动时，它是在底部小组件的后面，而不是在底部小组件的前面。我假设这是因为在我的代码中，底部小组件是在第二位创建的。有沒有辦法讓頂端小物件移到前面？这是我的代码。

  AnimationController _controller;
  Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _offsetAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(0.0, 1.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  } 

  @override
  Widget build(BuildContext context) {
    GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
          child: Column(
              children: <Widget>[
                SizedBox(height: 30),
                Expanded(
                  flex: 1,
                  child: SlideTransition(
                            key: cardKey,
                            position: _offsetAnimation,
                            child: GestureDetector(
                              onTap: () {
                                _controller.addStatusListener((status) {
                                  if (status == AnimationStatus.completed) {
                                    _controller.reset();
                                  }
                                });
                                _controller.forward();
                              },
                            child: EmptyPile(
                              title: "First Card",
                            ),
                            ),
                        ),
                  ),
                Expanded(flex: 1,
                  child: EmptyPile(
                    title: "Second Card",
                  ),
                ),
              ]
          ),
      ),
    );

  }

为了完整起见，但我认为这并不重要，这是我的... EmptyPile 码。

class EmptyPile extends StatelessWidget {
  EmptyPile({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {

    return Container(
      width: MediaQuery.of(context).size.width * 0.7,
      margin: EdgeInsets.fromLTRB(0, 30, 0, 30),
      decoration: borderDecoration(),
      child: Center(
        child: Text(
          title,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 30.0),
        ),
      ),
    );
  }

}

最后是我的边框装饰。

BoxDecoration borderDecoration() {
  return BoxDecoration(
      border: Border.all(
        width: 5,
      ),
      borderRadius: BorderRadius.all(
          Radius.circular(10)
      ),
      color: Colors.white
  );
}

Answer 1

好吧，就像简单的一样，我首先会把它们包在一个 "小部件 "里。Stack(). 在这种情况下，您可以访问层，并可以用您的序列定义哪个部件在前面，哪个不在前面。

I'm assuming this is because the bottom widget is created second in my code. 

你应该有一个有效的变通方法与上述方法。

希望能帮到你