如何使动画纸牌颤抖

Question

卡片UI似乎最近很流行，最近我开始学习颤动，因此我决定将两者结合起来，使卡片UI变得颤抖。但是，由于颤动对我来说是新事物，所以我很难入门。我想做这样的事情

https://cdn.dribbble.com/users/1998175/videos/36904/flower_store_2.mp4

我可以正确设置卡片叠的一部分，但是我真的不知道如何制作动画和滚动，这看起来都很复杂。我已经阅读了一些有关银条的信息，但并不太了解。基本上，我想完成以下任务：

1. 有多张卡片（内容可能很复杂），看起来好像它们在不断增长，在屏幕上上下滑动/

2. 即使卡片上下移动，导航栏也固定在底部（就像我链接的示例中的“结帐”按钮一样）

3. 能够以编程方式控制这些卡片（即，如果用户单击某个按钮，我希望能够使部分可见的卡片向上滑动并填充页面）

我不知道什么是最好的窗口小部件类型才能完成所有这些工作-我想它既可以是动画堆栈，也可以是条子列表，尽管它可能完全是其他东西。

无论哪种方式，如果有人可以发布一个类似这样的小例子，我将不胜感激（只需卡片，无需打扰内容，我会处理的）。预先感谢！

Answer 1

您要重新创建此设计，还是只是其中一部分？

我会遵循以下逻辑：

堆栈： -花朵照片（这里没有可点击的元素） NestedScrollView： -headerSliv​​erBuilder参数：SliverToBoxAdapter，容器大小为空以显示背景图像，您不能在此处放置背景图片，因为您有一个绿色的圆形袋子图标，该图标漂浮在白色块的顶部。 -正文：堆栈或列表视图的堆栈，取决于在第三秒中浅绿色块拉深绿色块时是否需要此动画：

第一个堆栈包含：

• 白色容器，顶部圆形，带有花朵说明和类别类型滑块。
• 浅绿色容器，带有装饰选项。
• 绿色圆形袋子图标

第二个堆栈包含：

• 深绿色背景的动画容器
• 深绿色方块的内部内容：价格计算
• 当您从浅绿色的块中添加花卉装饰时，内部内容正在发生变化，您需要聆听其高度的大小，并将此高度发送给动画容器，这将如何改变高度。

这是一个非常复杂的设计，因此很难写出所有细节。

但我希望这些建议能使您朝正确的方向前进。

P.s。刚开始做，当您遇到任何问题时，请写下您的问题。