Question

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

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

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 and Positioned元素，以便您的元素将在您“移动”的元素上方进行裁剪。将其视为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将不起作用。我正在向您展示如何使用$scope.showFreeEvents = false; $scope.events = [ /* here you should store unfiltered events */ ]; $scope.filteredEvents = filterEvents($scope.events); // whenever showFreeEvents checkbox value changes, re-filter the events $scope.onShowFreeEventsChanged = function() { $scope.filteredEvents = filterEvents($scope.events); }; function filterEvents(events) { return events.filter(function(event) { // Here you should write your filtering logic. // I'd recommend to remove such comparisons, as these are prone to errors. // \ return !$scope.showFreeEvents || event.eventName === 'Event 9'; }); }。

Stack

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

3 个答案: