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

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

尝试使用 Stack 和 Positioned 元素，这样您的元素就会夹在您所在的元素上方 "moving"。将其视为 html 中的 position: absolute。

Answer 2

尝试使用 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

Answer 3

实际上，如果您为它的父级指定了固定大小，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",)),
        ],
      ),
    ),
  );
}

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

Animated widget pushes other widgets

dart

flutter

flutter-layout

flutter-animation