Flutter - анимировать исчезновение контейнера из списка - PullRequest
0 голосов
/ 10 апреля 2020

У меня есть список контейнерных виджетов в строке, и у каждого из них есть маленький крестик, который позволяет пользователю удалить этот объект из списка. Прямо сейчас нет анимации, и это немного раздражает в пользовательском интерфейсе - кто-нибудь может сказать мне, как более аккуратно анимировать объект из списка и хорошо совместить другие объекты?

my минимальный воспроизводимый код выглядит следующим образом:

var _images = List<Asset>();

...

Widget _buildImagesGrid() {
    return Container(
      color: Colors.black12,
      padding: const EdgeInsets.all(4.0),
      child: GridView.count(
        crossAxisCount:
            isNotEmpty(_fileUploads) || isKeyboardOpen(context) ? 6 : 3,
        children: List.generate(_images.length, (index) {
          return Container(
              padding: const EdgeInsets.all(1.0),
              child: Stack(children: [
                AssetThumb(
                  asset: _images[index],
                  width: 300,
                  height: 300,
                ),

              Positioned(
                right: 0.0,
                top: -8.0,
                child: RawMaterialButton(
                  onPressed: () {
                    setState(() {
                      _images.removeAt(index);
                    });
                  },
                  child: new Icon(
                    Icons.close,
                    color: Colors.black,
                    size: 20.0,
                  ),
                  shape: new CircleBorder(),
                  elevation: 0.0,
                  constraints: BoxConstraints.tight(Size(24, 24)),
                  fillColor: Colors.grey[300],
                  padding: const EdgeInsets.all(0.0),
                ),
              ),
              ]));
        }),
      ),
    );
  }

If I deleted the middle one, I would want it to animate out of the screen and for the right-most object to slide over to the left

1 Ответ

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

Определенно не лучший способ сделать это, но он работает для меня:

  • обернуть Контейнер с не прокручиваемым ListView
  • обернуть ListView с Расширенным
  • обернуть Expanded с помощью AnimatedContainer с начальной высотой исходного контейнера
  • анимировать контейнер

В качестве альтернативы вы можете просто использовать обычный контейнер и анимировать значение высоты этого с помощью AnimationController .

...