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

【问题标题】：Animated widget pushes other widgets动画小部件推送其他小部件
【发布时间】：2019-04-08 01:29:30
【问题描述】：

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

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

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),
      ),
    ],
  ),
 ),
);
}

【问题讨论】：

那么，你为什么要使用 SizeTransition 呢？你需要什么效果？
我需要那个曲线效果我可以用另一个动画小部件来做吗？
你想如何移动小部件？

标签： dart flutter flutter-layout flutter-animation

【解决方案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",)),
        ],
      ),
    ),
  );
}

【讨论】：

这正是我想要的，我之前试过。通过这种方式，它不会运行动画。
实际上 SizeTransition 如果你给它的父母一个固定的大小就不会工作。所以，你可以使用SlideTransition或Stack，前者已经由用户提供，如果你想让我为你提供Stack实现，我可以做到。
好的，我已经编辑了解决方案，现在试试看。

【解决方案2】：

尝试使用 Stack 和 Positioned 元素，这样您的元素将夹在您正在“移动”的元素之上。将其视为 html 中的 position: absolute。

【讨论】：

【解决方案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),  
    );
  }

【讨论】：