如何让计时器不断显示

Question

我制作了一个国际象棋时钟，但时间只有在您单击其中一个按钮时才会更新，我想要它，所以时间会不断更新。按下按钮后我有 setState() 函数，但没有别的。每隔 10 秒左右更新一次，这怎么会让人生气。谢谢。这是我的代码：

import 'package:flutter/material.dart';

...
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(// this is what creates the page, everything should be inside this cuz everything is inside the page
        appBar: AppBar(//what is displayed at the top WOW
          title: Text('chess clock'),
          
        ),
        body: Column(
          children: [
            Container(
              margin: EdgeInsets.all(150.0),
              child: RaisedButton(
                onPressed: () {
                  setState((){
                    if (button1==1){
                      button1=2;
                    
                      minus=minus2-minus;
                      fminus=fminus+minus;
                      
                      print(minus);
                      
                      
                      divid=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
                      divid.round();
                      divid=divid-fminus;
                      minus=DateTime.now().microsecondsSinceEpoch/1000000;
                      divid=60.0-divid;
                    }
                  });
                  
                },
                child: Text(divid.round().toString()),
              )
            
            ),
            Container(
              margin: EdgeInsets.all(150.0),
              child: RaisedButton(
                onPressed: () {
                  setState((){
                    if (button1==2){
                      button1=1;

                      minus2=minus-minus2;
                      fminus2=fminus2+minus2;
                      
                      
                      
                      divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
                      divid2.round();
                      divid2=divid2-fminus2;
                      minus2=DateTime.now().microsecondsSinceEpoch/1000000;
                      divid2=60.0-divid2;
                    }
                  
                  });
                  
                },
                child: Text(divid2.round().toString()),
           ...

Answer 1

要获得完整的解决方案，您应该将 Kauli 的代码放入您的 initState() 方法并在 dispose() 中将其删除。它看起来像这样。

我做了一些小的改动以满足解决方案的需要。

编辑：我添加了周围的 StatefulWidget 类并删除了一些令人困惑的剪切和粘贴。您可以使用原始的 Scaffold 和其他小部件包装构建方法。为了让答案更清楚一点，我把它省略了。

class ChessClock extends StatefulWidget {

  @override
  _ChessClockState createState() => _ChessClockState();
}

class _ChessClockState extends State<ChessClock> {

  // Important to capture the timer object reference
  Timer chessClockTimer;

  Timer periodicSec()  {
    // How could this be made to updating every 10th of a second or so. 
    // Per op question
    return Timer.periodic(Duration(milliseconds: 10), (_){
      setState((){
        if (button1==2){
          button1=1;

          minus2=minus-minus2;
          fminus2=fminus2+minus2;

          divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
          divid2.round();
          divid2=divid2-fminus2;
          minus2=DateTime.now().microsecondsSinceEpoch/1000000;
          divid2=60.0-divid2;
        }
      });
    });
  }

  @override
  void initState() {
    super.initState();
    chessClockTimer = periodicSec(); // Kauli's code 
  }

  @override
  void dispose() {
    // Stop the timer
    chessClockTimer?.cancel();

    // Clean up the timer
    chessClockTimer?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Your build method code
  }
}

Answer 2

您可以使用 Timer.periodic 来执行此操作

void periodicSec()  {
  Timer.periodic(Duration(seconds: 1), (_){
    setState((){
      if (button1==2){
        button1=1;

        minus2=minus-minus2;
        fminus2=fminus2+minus2;



        divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
        divid2.round();
        divid2=divid2-fminus2;
        minus2=DateTime.now().microsecondsSinceEpoch/1000000;
        divid2=60.0-divid2;
      }
    });
  });
}