如何在堆栈动画中的任何位置制作颤动绘制/放置卡？

编程问答 2022-05-31

问题描述

我需要在颤振中做这个动画。

我有一张卡片列表。一个被选中并显示在顶部。当列表中的卡片被按下时，它应该被选中并用动画替换顶部的卡片。之前选择的卡片应该动画返回堆栈，始终位于屏幕顶部的位置。

我通过在每个项目上使用 ListView 和 Align 来实现堆叠外观：

Align(
 heightFactor: 0.5,)

用于堆叠卡片和​​

Align(
 heightFactor: 1.2,)

第一张卡片。

现在我想知道我是否可以通过这种方法添加动画，或者我是否必须自己放置卡片，以便我知道每个位置并可以对其进行动画处理。或者是否有其他更简单的方法？

enter image description here

这是迄今为止我的列表的完整代码：

class _CardSelectMenuScreen extends State<CardSelectMenuScreen> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,child: Drawer(
        elevation: 0,child: SafeArea(
          top: true,bottom: true,child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
              Expanded(
                child: StreamBuilder<IBaseState>(
                  stream: widget._walletsService.lastStateStream,builder: (context,snapshot) {

                        IWalletEntity selected;
                        wallets.removeWhere((element) {
                          if (element.id == widget._context.currentWalletID) {
                            selected = element;
                            return true;
                          }
                          return false;
                        });
                        wallets.insert(0,selected);

                        return ListView.builder(
                            padding: const EdgeInsets.only(top: 25),itemCount: wallets.length,itemBuilder: (context,index) {
                              var item = wallets[index];

                              if (index == 0) {
                                return Align(
                                  heightFactor: 1.2,alignment: Alignment.topCenter,child: MenuCard(
                                    wallet: item,isActive: widget._context.currentWalletID !=
                                                null &&
                                            item.id ==
                                                widget._context.currentWalletID
                                        ? true
                                        : false,onpressed: () {
                                      widget._context.setCurrent(item);
                                      setState(() {
                                        selectedId = item.id;
                                      });
                                    },),);
                              }
//...
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationanimationcarddrawdrawstack