Flutter AnimatedSwitcher прыгает между детьми -SOLVED- - PullRequest
Новая
       4

Flutter AnimatedSwitcher прыгает между детьми -SOLVED-

0 голосов
/ 25 апреля 2020

Уважаемое сообщество флаттеров!

Я пытаюсь реализовать пользовательский дизайн в списке панелей расширения. Поэтому я хотел создать некоторую анимацию, которая плавно анимирует из одного вида (например, заголовок) в другой вид (например, полную информацию о плитке), который имеет другие измерения (очевидно, полная информация будет выше, чем просто заголовок). Это довольно легко реализовать с помощью AnimatedContainer. Однако для анимации между этими двумя высотами мне понадобится высота виджета заголовка и виджета полной информации. Поскольку эти значения различаются между плитками (другая информация -> может быть, другая высота), а высота отслеживания с помощью глобальных ключей не является моим предпочтительным решением, я решил вместо этого использовать гораздо более простой AnimatedSwitcher. Однако поведение моего AnimatedSwitcher довольно странное. Сначала другие плитки в ListView (в моем примере кнопка) мгновенно перемещаются вниз, а затем плитка расширяется. Кто-нибудь знает, как я мог бы реализовать некоторый код для достижения той же анимации, которую я получил бы от AnimatedContainer (кнопка / другие плитки перемещались одновременно с расширением плитки)? Заранее благодарю за любой совет. Вот мой код: 

class MyPage extends State {
List _items;
int pos;

@override
void initState() {
pos = 0;
_items = [
  Container(
    color: Colors.white,
    width: 30,
    key: UniqueKey(),
    child: Column(
      children: <Widget>[Text('1'), Text('2')], //example that should visualise different heights
    ),
  ),
  Container(
    width: 30,
    color: Colors.white,
    key: UniqueKey(),
    child: Column(
      children: <Widget>[Text('1'), Text('2'), Text('44534'), Text('534534')],
    ),
  )
];
super.initState();
}

@override
Widget build(BuildContext context) {

return Scaffold(
  body: ListView(
    padding: EdgeInsets.only(top: 100),
    children: <Widget>[
      AnimatedSwitcher(
        duration: Duration(seconds: 1),
        transitionBuilder: (child, animation) => ScaleTransition(
          child: child,
          scale: animation,
        ),
        child: _items[pos],
      ),
      RaisedButton(
          child: Text('change'),
          onPressed: pos == 0
              ? () {
                  setState(() => pos = 1);
                }
              : () {
                  setState(() => pos = 0);
                })
    ],
  ),
);
}
}

Решение было довольно простым. Только что обнаружил, что существует виджет AnimatedSize, который автоматически определяет размер его дочерних элементов.

...