Анимированный виджет выталкивает другие виджеты

#dart #flutter #flutter-layout #flutter-animation

#dart #флаттер #flutter-макет #флаттер-анимация

Вопрос:

У меня есть анимированный виджет (изображение), расположенный в верхней части страницы, а под виджетом должен быть текст.

Я использую виджет перехода размера, и он подталкивает все виджеты под себя. Я не хочу, чтобы моя анимация подталкивала какие-либо другие виджеты. Все должно оставаться на своих местах. Я ожидаю чего-то подобного:

макет

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

1. тогда почему вы используете SizeTransition ? какой эффект вам нужен?

2. Мне нужен этот эффект кривой, могу ли я использовать для этого другой анимационный виджет?

3. как вы хотите переместить виджет?

Ответ №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",)),
        ],
      ),
    ),
  );
}

1. Это то, чего я точно хочу, и я пробовал это раньше. Таким образом, анимация не запускается.

2. На самом деле SizeTransition не будет работать, если вы задали его родительскому элементу фиксированный размер. Итак, вы можете либо использовать SlideTransition , либо Stack , первый уже предоставлен пользователем, если вы хотите, чтобы я предоставил вам Stack реализацию, я могу это сделать.

3. Хорошо, я отредактировал решение, попробуйте сейчас.

Ответ №2:

Попробуйте использовать элемент Stack и Positioned, чтобы ваш элемент был закреплен над элементами, которые вы «перемещаете». Думайте об этом как о position: absolute в html.

Ответ №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