Flutter 颤振页面视图，是否可以设置从列表中删除项目的动画？

我是个新手，我正在尝试在页面视图上做一些动画。准确地说，我想设置移除项目的动画

我尝试了几种方法来制作动画，除了解决方法，你们解决这个问题的方法对我的颤振技巧也有帮助

到目前为止，我所尝试的：

• 设置填充和不透明度的动画
  • 问题是，当我在onLongPress的setState中设置填充时，它会重建小部件，并用活动或非活动的CardPadding再次覆盖填充（我认为）
• 设置宽度和高度的动画
  • 我似乎无法让这两种价值观都发挥作用
• 在PageViewController上设置viewportFraction动画
  • 我不知道该怎么做，也不知道是否可以只为特定的“页面”这样做

下面是我迄今为止编写的（精简）代码

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  int activeCard = 0;

  EdgeInsets inActiveCardPadding = EdgeInsets.symmetric(vertical: 120.0, horizontal: 20.0);
  EdgeInsets activeCardPadding = EdgeInsets.symmetric(vertical: 105.0, horizontal: 10.0);

  PageController pageController = PageController(
    initialPage: 0,
    viewportFraction: 0.8,
  );

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            PageView.builder(
              itemCount: PlantCareApp.plants.length,
              controller: pageController,
              onPageChanged: (activeCardIndex) {
                setState(() {
                  this.activeCard = activeCardIndex;
                });
              },
              itemBuilder: (context, cardIndex) {
                return AnimatedContainer(
                  padding: (activeCard == cardIndex) ? activeCardPadding : inActiveCardPadding;,
                  duration: Duration(milliseconds: 250),
                  child: PlantCard(
                    PlantCareApp.plants[cardIndex],
                    onTap: () {
                      Navigator.pushNamed(context, PlantDetailScreen.route, arguments: PlantCareApp.plants[cardIndex]);
                    },
                    onLongPress: () {
                      setState(() {
                        //
                        // ANIMATE OR TRIGGER ANIMATION HERE
                        //

                        // do the actual removing
                        /*
                          PlantCareApp.plants[cardIndex].remove(); // remove from db
                          PlantCareApp.plants.removeAt(cardIndex); // remove from List
                        */
                      });
                      //PlantCareApp.plants[cardIndex].remove();
                    },
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Main扩展StatefulWidget{
@凌驾
_主状态createState（）=>\u主状态（）；
}
类_MainState扩展状态{
int-activeCard=0；
EdgeInsets InactiveVecardPadding=EdgeInsets.symmetric（垂直：120.0，水平：20.0）；
EdgeInsets activeCardPadding=EdgeInsets.symmetric（垂直：105.0，水平：10.0）；
PageController=PageController(
初始页：0，
视口分数：0.8，
);
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：安全区(
子：堆栈(
儿童：[
PageView.builder(
itemCount:PlantCareApp.plants.length，
控制器：页面控制器，
onPageChanged:（activeCardIndex）{
设置状态（）{
this.activeCard=activeCardIndex；
});
},
itemBuilder：（上下文，cardIndex）{
返回动画容器(
填充：（activeCard==cardIndex）？activeCardPadding:inActiveCardPadding；，
持续时间：持续时间（毫秒：250），
孩子：植物卡片(
PlantCareApp.plants[cardIndex]，
onTap:（）{
Navigator.pushNamed（上下文，PlantDetailScreen.route，参数：PlantCareApp.plants[cardIndex]）；
},
onLongPress:（）{
设置状态（）{
//
//在此处设置动画或触发动画
//
//进行实际拆卸
/*
PlantCareApp.plants[cardIndex].remove（）；//从数据库中删除
PlantCareApp.plants.removeAt（cardIndex）；//从列表中删除
*/
});
//PlantCareApp.plants[cardIndex].remove（）；
},
),
);
},
),
],
),
),
);
}
}

任何帮助都将不胜感激！你们将如何处理这样的问题，或者如何处理这个特定的用例

我想，由于相邻的“页面”也朝着彼此移动，所以对viewportFraction进行动画制作是最好的

---

谢谢

我不确定这是否是您要找的，但现在开始

实现这一点的一种方法是简单地使用flift中提供的小部件。其中两个可以帮助你：和

现在，你可以这样做：

//在某处定义
final _animatedListGK=GlobalKey，提供对
AnimatedList
的访问，以便您可以使用动画执行插入/删除操作

您的可驳回行可能如下所示：

Widget\u buildDismissibleRow（BuildContext上下文、int索引、PlantModel PlantModel）{
可驳回的回报(
key:ValueKey（plantModel.someKey），
方向：DismissDirection.startToEnd，
背景：容器（颜色：Colors.red），
onDismissed：（方向）{
//您可以使用：
//AnimatedList.of（上下文）
_animatedListGK.currentState.removeItem(
指数
（上下文，动画）=>Container（），
持续时间：duration.zero
);
},
子项：_buildContent（上下文、索引、plantModel）
);
}

您也可以在没有可撤销行的情况下执行此操作，甚至可以在可撤销行的子行中执行此操作（例如，
\u buildContent（）
）。类似于：

//您可以使用：
//AnimatedList.of（上下文）
_animatedListGK.currentState.removeItem(
指数
（上下文、动画）{
返回衰减转换(
不透明度：曲线动画（父对象：动画，曲线：间隔（0.5,1.0）），
child:SizeTransition(
sizeFactor:CurvedAnimation（父对象：动画，曲线：间隔（0.0，1.0）），
子项：_builContent（上下文、索引、plantModel）
)
);
},
持续时间：常量持续时间（毫秒：300）
);

请注意，
SizeTransition
如何通过调用
\u builContent（上下文、索引、plantModel）
简单地“调用自身”？这就是如何设置行本身的动画（不存在）

请务必观看上述文档页面中的视频！它们将有助于理解某些结构

可解雇人员的预览：

SizedTransition
可能的预览：
嗨！谢谢你的回答，我一定试试看。你能告诉我动画列表是否可以水平对齐以及是否可以捕捉吗？@GijsBeijer我不知道。“你到底是什么意思？”沃拉西奥斯：嗯，我想创造的东西应该像Android应用程序抽屉一样，所以水平的刷卡，我指的是在动画中总是有一张卡正好在中间。