无法在颤动中显示多个计时器

Question

我正在创建一个聊天投票功能，在聊天投票中我会为每个新的投票显示计时器。第一次投票一切正常工作正常但是当我创建第二次投票表单后端时新的投票对新问题很好但是第一次投票计时器也反映在第二次投票中。

这是用计时器显示问题的 PollWidget。

class PollWidget extends StatefulWidget {

  final Poll poll;
  final disabled;
  final PollCallbacks callbacks;

  PollWidget({required this.poll, required this.callbacks, this.disabled = false});

  @override
  State<StatefulWidget> createState() => PollWidgetState();
}

class PollWidgetState extends State<PollWidget> {

  @override
  Widget build(BuildContext context) {
    return Container(
        child: AbsorbPointer(
          absorbing: widget.disabled,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: _getChildren(widget.poll.question!),
          ),
        ),
    );
  }

  List<Widget> _getChildren(Question question) {
    List<Widget> children = List.empty(growable: true);

      children.add(_getSpace());
      children.add(
        TimerWidget(maxSeconds: widget.poll.maxSeconds, onFinish: () {
          widget.callbacks.onTimeFinished(widget.poll);
          setState(() {
            isPollEnded = true;
          });
          },
        ),
      );
    return children;
  }
}

这是 TimerWidget class 用于在轮询中显示时间。

class TimerWidget extends StatefulWidget {

  final int maxSeconds;
  final Function onFinish;

  TimerWidget({required this.maxSeconds, required this.onFinish});

  @override
  State<StatefulWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  int currentSeconds = 0;

  Timer? timer;

  @override
  void initState() {
    super.initState();
    currentSeconds = widget.maxSeconds > 0 ? widget.maxSeconds : 0;

    if (currentSeconds > 0) {
      timer = Timer.periodic(Duration(seconds: 1), (timer) {

        setState(() {
          currentSeconds -= 1;
        });
        if (currentSeconds <= 0) {
          timer.cancel();
          widget.onFinish();
        }

      });
    }

  }

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
    timer = null;
  }

  String getTime() {

    if (currentSeconds >= 86400) {
      int days = currentSeconds~/(24 * 3600);
      int n = currentSeconds % (24 * 3600);
      int hour = n ~/ 3600;
      return "${days.prefixZero()} Days ${hour.prefixZero()} ${Strings.hours}";

    } else if (currentSeconds >= 3600) {
      int hours = currentSeconds~/3600;
      int minutes = (currentSeconds % 3600) ~/ 60;
      int seconds = (currentSeconds% 3600) % 60;
      return "${hours.prefixZero()}:${minutes.prefixZero()}:${seconds.prefixZero()} ${Strings.hours}";

    } else {
      int minutes = currentSeconds ~/60;
      int seconds = currentSeconds % 60;
      return "${minutes.prefixZero()}:${seconds.prefixZero()} ${(currentSeconds >= 60) ? Strings.minutes : Strings.seconds}";
    }
  }

  @override
  Widget build(BuildContext context) =>
      Text("${getTime()}" , style: TextStyle(color: Color(AppColors.alert)),);

}

Please see the output here i have created 2nd poll of 2 min but it is showing above poll time

Answer 1

能否请您尝试在 Timer Widget 中添加 Key？

    class TimerWidget extends StatefulWidget {        
          final int maxSeconds;
          final Function onFinish;
          Key key;    
        
          TimerWidget({required this.maxSeconds, required this.onFinish, Key key});
        
          @override
          State<StatefulWidget> createState() => _TimerWidgetState();
        }

像这样使用计时器小部件

List<Widget> _getChildren(Question question) {
    List<Widget> children = List.empty(growable: true);

      children.add(_getSpace());
      children.add(
        TimerWidget(
      key:UniqueKey(),
       maxSeconds: widget.poll.maxSeconds, onFinish: () {
          widget.callbacks.onTimeFinished(widget.poll);
          setState(() {
            isPollEnded = true;
          });
          },
        ),
      );
    return children;
  }

无法在颤动中显示多个计时器

Not able to show multiple timer in flutter

flutter

flutter-state