flutter - 如何定期设置状态?

标签 flutter dart setstate

我正在尝试为特殊日子构建一个倒计时应用程序,例如 11 d 2 h 30 m 23s 到新年,但我不能每秒重新加载我的状态,所以它只显示我加载页面的第二秒不知道如何动态重新加载页面。

 import 'package:flutter/material.dart';

    class RopSayac extends StatefulWidget {
      _RopSayacState createState() => _RopSayacState();
    }

    class _RopSayacState extends State<RopSayac> {

      var now = DateTime.now().second.toString();
      String asd(){
        setState(() {
        now = DateTime.now().second.toString();

        });
        return now;
      }

      @override
      Widget build(BuildContext context) {


        return Container(
          child: new Text(asd()),
        );
      }
    }

这是我得到的,它没有重新加载时间。我对 flutter 腾很陌生。

最佳答案

正如 pskink 和 Günter 提到的,使用 Timer。您甚至可以使用适合您的场景的 periodic 构造函数。

请注意,您不需要 asd() 函数。当您调用 setState() 时,将自动调用 build 方法并传递新的 now 属性值。

如果需要,可以使用 initState 设置初始值,如本例所示,设置 Timer

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Timer Periodic Demo', home: RopSayac());
  }
}

class RopSayac extends StatefulWidget {
  _RopSayacState createState() => _RopSayacState();
}

class _RopSayacState extends State<RopSayac> {
  String _now;
  Timer _everySecond;

  @override
  void initState() {
    super.initState();

    // sets first value
    _now = DateTime.now().second.toString();

    // defines a timer 
    _everySecond = Timer.periodic(Duration(seconds: 1), (Timer t) {
      setState(() {
        _now = DateTime.now().second.toString();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: new Text(_now),
      ),
    );
  }
}

关于flutter - 如何定期设置状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53767950/

相关文章:

firebase - 如何使用DocumentSnapshot而不是QuerySnapshot?

javascript - 从 React props 获取数据

javascript - 将变量传递给 setState

android - 如何在 Flutter 的原生 C++ 中使用 OpenCV 4(2021 年)(支持 Flutter 2.0)?

dart - Flutter future 如何重跑?

flutter - 单击表单时,inkwell ontab 不起作用

Flutter 文本字段允许用户仅在给定范围内插入数字

reactjs - React setState 不立即更新

list - Flutter 计算其类别中商品的总价

flutter - 使用 Firebase 进行声明式身份验证路由