动画小部件推送其他小部件

Question

我有一个位于页面顶部的动画小部件（图像），在小部件下面应该有一个文本。

我使用大小转换小部件，它推动自身下的所有小部件。我不希望我的动画推送任何其他小部件。一切都应该留在原地。我期待这样的事情：

layout

Widget _animation() {
  Image img= Image.asset(
    'assets/images/myImg.jpg',
  );

  _controller.forward(from: 0);

  return SizeTransition(
    child: img,
    sizeFactor: CurvedAnimation(
      curve: Curves.fastOutSlowIn,
      parent: _controller,
    ),
  );
}

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
    body: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      _animation(),
      Text(
        "My Text",
        style: TextStyle(color: Colors.black87, fontSize: 30),
      ),
    ],
  ),
 ),
);
}

Answer 1

实际上，如果你给它的父母一个固定的大小，那么SizeTransition将不起作用。我告诉你如何使用Stack做到这一点。

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(left: 0, child: _animation()),
          Positioned(top: 100, child: Text("This is your text",)),
        ],
      ),
    ),
  );
}

Answer 2

尝试使用Stack和Positioned元素，以便元素将在您“移动”的元素上方剪辑。把它想象成html中的position: absolute。

Answer 3

尝试使用SlideTransition而不是SizeTransition，因为您想将图像从顶部移动到实际位置。

  Widget _animation() {
    Image img= Image.asset(
    'assets/images/myImg.jpg',
    );
    _controller.forward(from: 0);
    return SlideTransition(
      child: img,
      position: Tween<Offset>(begin: Offset(0.0, -1.0), end: Offset.zero)
          .animate(_controller),  
    );
  }

更多信息：

https://docs.flutter.io/flutter/widgets/SlideTransition-class.html