在 Flutter 中单击时强制动画停止（并到达最后位置）

Question

我想像社交媒体平台一样实现 Stories 功能。我遇到的问题很简单，但我不太了解 Flutter 来解决它。

这是我想要的输入：-

这就是我所拥有的：-

如您所见，单击时，加载栏不会出现充实而变化。它只是保持其状态。我不想要这个。我想要它就像上面的 gif

这是我的代码：-

//.... code about changing the index on tap and other things is right. so no need to put them here.

Positioned(child: Row(children: buildStoryBars(context, widget.options, index),
              ))

这是完成工作的函数：-

List<StoryBar> buildStoryBars(
    BuildContext context, StoryOptions options, int index) {
  final screenWidth = MediaQuery.of(context).size.width;
  List<StoryBar> data = [];
  double width;

width = screenWidth / options.stories.length;
    for (var i = 0; i < options.stories.length; i++) {
      data.add(
        StoryBar(
            storyType: StoryMediaType.image,
            duration: options.duration,
            seen: i < index ? true : false,
            shouldAnimate: i <= index ? true : false,
            width: width),
      );
    }
return data;
}

这是我用于显示动画条的小部件：-

import 'package:flutter/material.dart';

import 'package:percent_indicator/linear_percent_indicator.dart';

import '../utils/enums.dart';

class StoryBar extends StatelessWidget {
  final StoryMediaType storyType;
  final Duration duration;
  final bool seen;
  final bool shouldAnimate;
  final double width;
  const StoryBar(
      {Key? key,
      required this.storyType,
      required this.duration,
      required this.seen,
      required this.width,
      required this.shouldAnimate})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LinearPercentIndicator(
      width: width,
      lineHeight: 10.0,
      percent: shouldAnimate ? 1.0 : 0.0,
      linearStrokeCap: LinearStrokeCap.roundAll,
      backgroundColor: Colors.grey,
      progressColor: Colors.white,
      isRTL: true,
      animation: seen == false ? true : false,
      animationDuration: duration.inMilliseconds,
      addAutomaticKeepAlive: false,
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
    );
  }
}

那么有没有一种方法可以实现上面所需的输出，就像Facebook？ 我已经使用了我所知道的关于 Flutter 和编程的一切:( 谢谢。

Answer 1

添加一个新条件，将所有先前的项目设置为 1.0（如果它们已被“看到”）

percent: seen ? 1.0 : shouldAnimate ? 1.0 : 0.0

这里的问题是，当跳过一个故事时，您显式禁用动画

animation: seen == false ? true : false

但这将停止并保持进度指示器的状态（如果是 0.2，它将保持这种状态），上述解决方案是将所有被视为“已看到”的项目设置为值 1.0