В настоящее время я использую AnimatedList в своем приложении Flutter, и у меня возникают проблемы с анимацией удаленных элементов списка.
Сама анимация работает должным образом, но как только анимация удаленного элемента заканчивается, он просто исчезает, заставляя другие виджеты прыгать на свои места. Я ожидал, что другие элементы перейдут на место удаленного элемента ...
Я попытался обернуть элементы списка в ScaleTransition
, но это не помогло - другие элементы списка по-прежнему не реагируют на удаленный предмет, пока он не закончил анимацию.
Этот вид бросает вызов цели AnimatedList, верно? Или я сделал что-то не так? Видео "Виджет недели" об AnimatedList ясно показывает, что элементы списка реагируют на вновь вставленные элементы, изменяя их положение ...
Вот мой код:
@override
Widget build(BuildContext context) {
return AnimatedList(
padding: EdgeInsets.only(top: REGULAR_DIM,
bottom: REGULAR_DIM + kBottomNavigationBarHeight),
initialItemCount: data.length,
itemBuilder: (context, index, animation) {
return MyCustomWidget(
data: data[index],
animation: animation,
disabled: false
);
},
);
}
class MyCustomWidget extends AnimatedWidget {
final MyModel data;
final bool disabled;
MyCustomWidget({
@required this.data,
@required Animation<double> animation,
this.disabled = false
}) : super(listenable: animation);
Animation<double> get animation => listenable;
@override
Widget build(BuildContext context) {
final content = ... ;
return ScaleTransition(
scale: CurvedAnimation(
parent: animation,
curve: Interval(0, 0.25)
).drive(Tween(begin: 0, end: 1)),
child: FadeTransition(
opacity: animation,
child: SlideTransition(
position: animation.drive(
Tween(begin: Offset(-1, 0), end: Offset(0, 0))
.chain(CurveTween(curve: Curves.easeOutCubic))),
child: content,
),
),
);
}
}
А потом где-то в MyCustomWidget я вызываю эту функцию:
void _remove(BuildContext context) async {
final animatedList = AnimatedList.of(context);
// obtain myModel asynchronously
myModel.removeData(data);
animatedList.removeItem(index, (context, animation) => MyCustomWidget(
data: data,
animation: animation,
disabled: true,
), duration: Duration(milliseconds: 350));
}