Question

我正在尝试制作一个简单的计时器，以了解从日期到当前日期已经过去了多少时间

但是我遇到的问题是“文本”窗口小部件仅绘制一次，但不会更新，我希望文本每1秒更新一次。而且不必刷新页面，是否可以这样做？

import 'package:flutter/material.dart';

class TimerPage extends StatefulWidget {
  @override
  _TimerPageState createState() => _TimerPageState();
}

class _TimerPageState extends State<TimerPage> {
  @override
  Widget build(BuildContext context) {

    final start = DateTime(2020, 8, 10, 16, 30, 0);
    final currentdate= DateTime.now();
    final comparation = currentdate.difference(start);

    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Center(
              child: Column(
            children: <Widget>[
              Text("Start time: " + start.toString()),
              Divider(),
              Text(
                "time elapsed = " + comparation.toString().substring(0, 7),
                style: TextStyle(color: Color(0xff5abd8c), fontSize: 26),
              )
            ],
          )),
        ),
      ),
    );
  }
}

我尝试这个：

Timer timer;
  final start = DateTime(2020, 8, 17, 21, 30, 0);
  final dateActual = DateTime.now();
  Duration comparation = new Duration(hours: 0, minutes: 0, seconds: 0);
  @override
  void initState() {
    timer = Timer.periodic(Duration(seconds: 1), (_) {
      setState(() {
        comparation = dateActual.difference(start);
        print(comparation);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Center(
              child: Column(
            children: <Widget>[
              Text("Start time: " + start.toString()),
              Divider(),
              Text(
                "time elapsed = " + comparation.toString().substring(0, 7),
                style: TextStyle(color: Color(0xff5abd8c), fontSize: 26),
              )
            ],
          )),
        ),
      ),
    );
  }
}

Answer 1

为此，您需要Timer库中的dart:async，特别是Timer.periodic。

实例化您initState中StatefulWidget中的一个，并在dispose中将其取消。

Timer.periodic进行回调，该回调在每个持续时间过去后触发。由于您的DateTime差额计算已在build中完成，因此您只需要使用setState触发重建。

Timer timer;

@override
void initState() {
  timer = Timer.periodic(Duration(seconds: 1), (_) {
    setState(() {});
  });
}

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

至少要重建正在更改的Text小部件，否则无法做到这一点。我认为没有必要，因为此build方法中没有太多内容，但是如果您要这样做，则必须提取所有必要的时间计算，计时器和单个{{1} }小部件改成自己的Text，这样就只重建了一个需要重建的小部件。

理想情况下，您还应该在StatefulWidget方法之外进行时间计算，但是在这种情况下这不是什么大问题，您会得到一些有用的信息。

如何自动更新文本小部件-Flutter

1 个答案: