Flutter : 분과 초를 표시하는 카운트 다운 타이머

stfn3000

사용자가 입력 한 기간 (분)부터 카운트 다운하는 카운트 다운 타이머를 만들었습니다.

카운트 다운 타이머는 기술적으로 작동하지만 분만 카운트 다운으로 표시됩니다. 초는 전체 시간 동안 : 00으로 유지됩니다.

카운트 다운 타이머의 일부로 초를 표시하려면 어떻게해야합니까?

다음은 더 긴 파일에서 발췌 한 관련 코드입니다. 필요한 경우 더 포함 할 수 있습니다.

개별 코드는 다음과 같이 분류됩니다.

먼저 타이머 텍스트를 실제로 표시하고 스타일을 지정할 수있는 클래스가 있습니다.

class Countdown extends AnimatedWidget {
  Countdown({ Key key, this.animation }) : super(key: key, listenable: animation);
  Animation<int> animation;

  @override

  build(BuildContext context){

    Duration clockTimer = Duration(seconds: animation.value*60);

    String timerText = '${clockTimer.inMinutes.remainder(60).toString()}:${(clockTimer.inSeconds.remainder(60) % 60).toString().padLeft(2, '0')}';

    return Text(
      "$timerText",
      style: TextStyle(         
        fontSize: 110,
        color: Theme.of(context).primaryColor,
      ),
    );

  }
}

다음과 같은 애니메이션 컨트롤러가 있습니다.

AnimationController _controller;

  @override

  void dispose(){
    _controller.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    @override

      _controller = AnimationController(
          vsync: this,
        duration: Duration(minutes: gameData.levelClock)  // gameData.levelClock is a user entered number elsewhere in the applciation
      );


  }

마지막으로 Countdown 위젯을 호출하는 코드 부분이 있습니다.

Countdown(
     animation: StepTween(
     begin: gameData.levelClock,   // THIS IS A USER ENTERED NUMBER 
     end: 0,
   ).animate(_controller),
)

제공 할 수있는 도움에 감사드립니다.

네미 샤

따라서 문제는 CountDown위젯 을 만들 때 타이머의 분 단위 값인 double 값으로 시작한다는 것입니다 (이 예에서는 값이 5라고 가정합니다). 애니메이션을 계속하기로부터 카운트 다운한다 beginend(이 경우 0). 5 분 이상 5에서 0으로 애니메이션됩니다.

그런 다음 값을 사용하고 초로 변환하지만 애니메이션 값이 0에서 5 사이이므로 항상 5:00, 4:00, 3:00, 2:00, 1:00 또는 0:00을 제공합니다. .

해결책은 코드를 다음과 같이 변경하는 것입니다.

Countdown(
     animation: StepTween(
     begin: gameData.levelClock * 60, // convert to seconds here
     end: 0,
   ).animate(_controller),
)

그런 다음 카운트 다운 위젯 Duration에서

Duration clockTimer = Duration(seconds: animation.value);

DartPad 에서 작동하는 예제는 여기 에서 찾을 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

카운트 다운 타이머를 다시 시작하는 방법과 초를 건너 뛰는 이유

분류에서Dev

어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)

분류에서Dev

자바 스크립트 카운트 다운 타이머에 분 또는 초를 추가 하시겠습니까?

분류에서Dev

카운트 다운 타이머는 분과 초가 0 일 때 시간을 줄이지 않습니다.

분류에서Dev

카운트 다운 타이머에 형식 시간 / 분 / 초를 추가하는 방법

분류에서Dev

분 / 초 카운트 다운 타이머가 작동하지 않습니까?

분류에서Dev

매시간 카운트 다운 타이머, 30 분 표시

분류에서Dev

React에서 카운트 다운 타이머를 표시하는 방법

분류에서Dev

카운트 다운 타이머가 있는데 초와 분이 움직이지 않습니다.

분류에서Dev

카운트 다운 타이머를 추가하는 방법

분류에서Dev

증분 타이머 카운트 다운

분류에서Dev

반응 카운트 다운 타이머를 만드는 방법

분류에서Dev

고급 카운트 다운 타이머를 만드는 방법

분류에서Dev

카운트 다운 타이머를 만드는 방법

분류에서Dev

Android TimePickerDialog가 실제 카운트 다운 타이머를 통과하지 않고 선택한 시간

분류에서Dev

카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

분류에서Dev

카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

분류에서Dev

TextView에서 카운트 다운 타이머를 어떻게 표시합니까?

분류에서Dev

ViewController를 닫은 후 카운트 다운 타이머를 계속하는 방법

분류에서Dev

PHP를 사용하는 카운트 다운 타이머, 작동하지 않음

분류에서Dev

jQuery 360 카운트 다운-타이머가 실행되는 동안 초를 추가하는 버튼

분류에서Dev

카운트 업 타이머에 분이 표시되지 않음

분류에서Dev

카운트 다운 타이머를 변경하지 않는 라벨 SpriteKit Objective C?

분류에서Dev

두 개의 카운트 다운 타이머를 사용하는 Android

분류에서Dev

카운트 다운 타이머를 사용한 루프 [자동 재시작]

분류에서Dev

UIDatePicker (카운트 다운 타이머)를 사용하여 0 시간 0 분을 선택하는 방법은 무엇입니까?

분류에서Dev

Flutter 재 작업 된 질문 : 버튼이있는 위젯과 카운트 다운 타이머가있는 위젯간에 상태 공유 문제

분류에서Dev

UI를 업데이트하는 백그라운드의 카운트 다운 타이머

분류에서Dev

시간을 표시하지 않는 카운트 다운 타이머

Related 관련 기사

  1. 1

    카운트 다운 타이머를 다시 시작하는 방법과 초를 건너 뛰는 이유

  2. 2

    어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)

  3. 3

    자바 스크립트 카운트 다운 타이머에 분 또는 초를 추가 하시겠습니까?

  4. 4

    카운트 다운 타이머는 분과 초가 0 일 때 시간을 줄이지 않습니다.

  5. 5

    카운트 다운 타이머에 형식 시간 / 분 / 초를 추가하는 방법

  6. 6

    분 / 초 카운트 다운 타이머가 작동하지 않습니까?

  7. 7

    매시간 카운트 다운 타이머, 30 분 표시

  8. 8

    React에서 카운트 다운 타이머를 표시하는 방법

  9. 9

    카운트 다운 타이머가 있는데 초와 분이 움직이지 않습니다.

  10. 10

    카운트 다운 타이머를 추가하는 방법

  11. 11

    증분 타이머 카운트 다운

  12. 12

    반응 카운트 다운 타이머를 만드는 방법

  13. 13

    고급 카운트 다운 타이머를 만드는 방법

  14. 14

    카운트 다운 타이머를 만드는 방법

  15. 15

    Android TimePickerDialog가 실제 카운트 다운 타이머를 통과하지 않고 선택한 시간

  16. 16

    카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

  17. 17

    카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

  18. 18

    TextView에서 카운트 다운 타이머를 어떻게 표시합니까?

  19. 19

    ViewController를 닫은 후 카운트 다운 타이머를 계속하는 방법

  20. 20

    PHP를 사용하는 카운트 다운 타이머, 작동하지 않음

  21. 21

    jQuery 360 카운트 다운-타이머가 실행되는 동안 초를 추가하는 버튼

  22. 22

    카운트 업 타이머에 분이 표시되지 않음

  23. 23

    카운트 다운 타이머를 변경하지 않는 라벨 SpriteKit Objective C?

  24. 24

    두 개의 카운트 다운 타이머를 사용하는 Android

  25. 25

    카운트 다운 타이머를 사용한 루프 [자동 재시작]

  26. 26

    UIDatePicker (카운트 다운 타이머)를 사용하여 0 시간 0 분을 선택하는 방법은 무엇입니까?

  27. 27

    Flutter 재 작업 된 질문 : 버튼이있는 위젯과 카운트 다운 타이머가있는 위젯간에 상태 공유 문제

  28. 28

    UI를 업데이트하는 백그라운드의 카운트 다운 타이머

  29. 29

    시간을 표시하지 않는 카운트 다운 타이머

뜨겁다태그

보관