如何在扑扑中实现故事进度视图

Question

我想以最好的方式来开发widget/view，它可以用作 instagram，虚构故事，如下图所示。 android有许多依赖关系，但找不到任何依赖。  我正在考虑使用carousal/viewpager在不同用户的故事之间移动，但是我无法获得如何在进度条位于顶部的单个用户（图像或视频）故事之间来回移动。进度条完成后，它将自动移至下一个。

Answer 1

尝试使用ViewPager + Stack创建自定义Transform，然后使用GestureDetector在页面/故事之间进行切换。

Answer 2

不确定是否还要让用户有机会手动切换到下一张图像。

以下是您要用于动画“故事”的一些基本要素：

• AnimationController，其持续时间取决于故事中图像的数量。启动动画以浏览图像并为进度栏设置动画。动画控制器通常的范围是0.0到1.0。假设您有5张图片。您将显示第一张图像，从0.0到0.2，第二张图像从0.2到0.4 ...
• AnimatedBuilder，用于监听动画控制器。动画运行时，动画构建器中的内容将在每一帧中重建。在builder内部，计算必须显示的图像。
• CustomPaint手动为单个图像绘制带有部分的进度条。将当前动画值和图像数量传递到您的CustomPainter。
• Image小部件以绘制图像。

Answer 3

我知道这个问题已经问了很长时间了，但是对于仍然提出相同问题的人，您可以使用以下库：https://pub.dev/packages/story_view或查看实现相同内容的源。