简单的计时器应用程序，它计算自启动以来经过的秒数，显示不正确的时间

Question

我是 Flutter 的新手，因此决定构建一个简单的计时器应用程序，该应用程序计算自启动以来经过的秒数，并最终显示错误的时间。计时器从 0 开始，然后递增到 1，从那时起，它似乎呈指数增长。

ma​​in.dart

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

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

app.dart

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

class App extends StatelessWidget {
 @override

 Widget build(BuildContext context) {
  return MaterialApp(
  title: "Timer",
  home: Scaffold(
    appBar: AppBar(
      title: Text("Timer"),
      centerTitle: true,
    ),
    body: Row(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ClockWidget(),
            Text("seconds", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 35),)
          ],
        )
      ],
    )
  ),
);
}

clock_widget.dart

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

class ClockWidget extends StatefulWidget {
  @override
  ClockWidgetState createState() => ClockWidgetState();
}

class ClockWidgetState extends State<ClockWidget> {
  @override
  int _secondCount = 0;

  Widget build(BuildContext context) {
    Timer.periodic(Duration(seconds: 1), (Timer t) => (setState(() {_secondCount+=1;})));
    print("${_secondCount}");
    return Text("${_secondCount}", style: TextStyle(fontSize: 75, color: Color.fromRGBO(30, 144, 255, 1)),);
  }
}

我尝试了很多方法，但对我来说，这似乎是最简单的一种，而且在逻辑上它似乎是正确的。每隔一秒调用一次 setState 会增加 _secondsCount。

The app's second count hardly 15 seconds after running it.

Answer 1

您当前每秒都在定义新的Timers。这些计时器中的每一个都在增加秒数。

您只想在build 方法之外定义一次Timer。

1. 在initState 中创建一个计时器
2. 每秒更新一次状态
3. 在build方法中显示秒数
4. 取消dispose中的Timer

这是一个例子：

class ClockWidget extends StatefulWidget {
  @override
  ClockWidgetState createState() => ClockWidgetState();
}

class ClockWidgetState extends State<ClockWidget> {
  Timer _timer;
  int _secondCount = 0;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        this._secondCount += 1;
      });
    });
  }

  Widget build(BuildContext context) {
    print("${_secondCount}");
    return Text(
      "${_secondCount}",
      style: TextStyle(fontSize: 75, color: Color.fromRGBO(30, 144, 255, 1)),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}