颤振计时器仅更新秒小部件

Posted 2023-04-18

【中文标题】颤振计时器仅更新秒小部件

【英文标题】：flutter timer only updating seconds widget

【发布时间】：2019-07-22 17:55:48

【问题描述】：

我遵循了一个构建秒表的 Flutter 教程。

应用程序构建并运行，但我无法让它更新小部件的小时 (HRS) 和分钟 (MIN) 部分。它只更新秒数(SEC)。

我尝试过移动代码片段并进行调试，但我最终只是破坏了整个代码，因此它根本无法运行。

这是我的意思的截图：

这是应用程序：

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return new TimerAppState();
  


class TimerAppState extends State<MyApp> 
  static const duration = const Duration(seconds: 1);

  int secondsPassed = 0;
  bool isActive = false;

  Timer timer;

  void handleTick() 
    if(isActive) 
      setState(() 
        secondsPassed = secondsPassed + 1;
      );
    
  

@override
Widget build(BuildContext context) 

  if (timer == null)
    timer = Timer.periodic(duration, (Timer t)
    
      handleTick();
    );

    int seconds = secondsPassed * 60;
    int minutes = secondsPassed ~/ 60;
    int hours =secondsPassed ~/ (60 * 60);

    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Timer'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                CustomTextContainer(label: 'HRS', value: hours.toString().padLeft(2, '0')),
                CustomTextContainer(label: 'MIN', value: minutes.toString().padLeft(2, '0')),
                CustomTextContainer(label: 'SEC', value: seconds.toString().padLeft(2, '0')),
                ],
              ),

              Container(
                margin:EdgeInsets.only(top: 20),
                child:RaisedButton(
                  child: Text(isActive ? 'STOP' : 'START'),
                  onPressed: () 
                    setState(() 
                      isActive = !isActive;
                    );
                  ,
                ),
              ),
            ],
          ),
        ),
      )
    );
  


class CustomTextContainer extends StatelessWidget 

  CustomTextContainer(this.label, this.value);

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) 
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(20),
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.circular(10),
        color: Colors.black87,
      ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              '$value',
              style: TextStyle(
                color: Colors.white,
                fontSize: 34,
                fontWeight: FontWeight.bold
              ),
            ),
            Text(
              '$label',
              style: TextStyle(
                color: Colors.white70,
              ),
            )
          ],
        ),
      );
  

有没有办法让它正常工作？

谢谢！

【参考方案1】：

您必须在 setState 方法中添加所有更新的值，而不仅仅是秒

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return new TimerAppState();
  


class TimerAppState extends State<MyApp> 
  static const duration = const Duration(seconds: 1);

  int secondsPassed = 0;
  bool isActive = false;

  Timer timer;
  int seconds, minutes, hours;
  @override
  void initState() 
    super.initState();
    if (timer == null)
      timer = Timer.periodic(duration, (Timer t) 
        handleTick();
      );
  

  void handleTick() 
    if (isActive) 
      setState(() 
        secondsPassed = secondsPassed + 1;
        seconds = secondsPassed * 60;
        minutes = secondsPassed ~/ 60;
        hours = secondsPassed ~/ (60 * 60);
      );
    
  

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Timer'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CustomTextContainer(
                        label: 'HRS', value: hours.toString().padLeft(2, '0')),
                    CustomTextContainer(
                        label: 'MIN',
                        value: minutes.toString().padLeft(2, '0')),
                    CustomTextContainer(
                        label: 'SEC',
                        value: seconds.toString().padLeft(2, '0')),
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: RaisedButton(
                    child: Text(isActive ? 'STOP' : 'START'),
                    onPressed: () 
                      setState(() 
                        isActive = !isActive;
                      );
                    ,
                  ),
                ),
              ],
            ),
          ),
        ));
  


class CustomTextContainer extends StatelessWidget 
  CustomTextContainer(this.label, this.value);

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) 
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(20),
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.circular(10),
        color: Colors.black87,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '$value',
            style: TextStyle(
                color: Colors.white, fontSize: 34, fontWeight: FontWeight.bold),
          ),
          Text(
            '$label',
            style: TextStyle(
              color: Colors.white70,
            ),
          )
        ],
      ),
    );
  

【讨论】：

请看这个例子，我如何获得像通话时间计时器这样的增量时间...thnx。我的问题主要是如何在 secondsPassed 达到 59 后将秒数归零。

秒 = t.tick - (小时 * (60 * 60)) - (分钟 * 60);

【参考方案2】：

使用 som 模 %

int seconds = secondsPassed % 60;
int minutes = secondsPassed ~/ 60 % 60;
int hours = secondsPassed ~/ (60 * 60) % 24;