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.

使用上述方法，您应该有一个有效的解决方法。

希望有帮助！

如何在层次结构中紧随其后的小部件之上为动画小部件设置动画？

1 个答案: