页面打开时开始计数的简单计时器 [Flutter]答案

【问题标题】：Simple Timer to Start Counting Up as Page Opens [Flutter]页面打开时开始计数的简单计时器 [Flutter]
【发布时间】：2021-08-11 22:09:04
【问题描述】：

我有一个页面，我想向用户显示他们在页面上的经过时间，类似于 Forest 应用程序为其番茄方法所做的事情。然而，我的不是倒计时，而是倒计时。

我无法让计时器在页面加载时启动。此外，一旦用户退出页面，我想让计时器停止并打印经过的时间。并将经过的时间数据传递到后端或其他页面。使用的包是https://pub.dev/packages/simple_timer

如何才能最好地实现这一目标？谢谢各位专家！


class TimerPage extends StatefulWidget {

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

class _TimerPageState extends State<TimerPage>
    with SingleTickerProviderStateMixin {
  TimerController _timerController;
  TimerProgressTextCountDirection _progressTextCountDirection =
      TimerProgressTextCountDirection.count_up;

  @override
  void initState() {
    _timerController = TimerController(this);
    _timerController.start();
    _timerController.forward(from: 0.0);
    _timerController.addListener(_printLatestValue);

    super.initState();
  }

  _printLatestValue() {
    print("${_timerController.duration}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff04072E),
      appBar: AppBar(
        title: Text('Aloha', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.black,
      ),
      body: WillPopScope(child: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(vertical: 10),
              child: SimpleTimer(
                controller: _timerController,
                duration: const Duration(seconds: 0),
                displayProgressIndicator: false,
                backgroundColor: Colors.grey,
                progressTextStyle: TextStyle(color: Colors.white, fontSize: 60),
              ),
            ),
ElevatedButton( onPressed: ()  {
_printLatestValue();
                Navigator.pushReplacement<void, void>(
                    context,
                    MaterialPageRoute<void>(
                    builder: (BuildContext context) =>  MainPage()));
              },child: Text('Next'))
          ]),
        ),
      ),
),
    ); 
  }
}

插入后出现的错误

_timerController.start();
    _timerController.forward(from: 0.0);

【问题讨论】：

标签： flutter timer navigation state init

【解决方案1】：

您应该在initState 中调用_timerController.start() 来启动计时器:) 要在用户退出页面后显示时间或传递时间，您可以使用两件事来有效地做到这一点：导航器弹出结果和@ 987654323@ 小部件。只需将页面包装成 WillPopScope 并调用 Navigator.pop 并在回调中返回结果。

【讨论】：

感谢您的回复尼科。（更新代码）在我添加 _timerController.start() 后，出现错误，提示 AnimationController 的持续时间不能为空。所以我添加了 _timerController.forward(from:0.0)。不确定这是否正确。我正在查看 WillPopScope，所以“下一步”按钮将保存数据（经过的时间）并导航到下一页对吗？另一个qtn，如何给这个正在运行的定时器添加监听器，以便在按下“下一步”按钮时打印监听到的数据？

【解决方案2】：

在您的错误屏幕中说... 在开始之前在 initState() 上添加这一行

 _timeController = TimerController.seconds(15);

【讨论】：