异步定期setState

Question

我正在尝试实现一个函数，它会定期将小部件添加到我的列表中（例如，在2秒时一次）并调用setState来更新列表，我正在绘制。

我试着打电话给setState()，它只运行一次，我认为setState只是不调用函数。我试图在功能上使用甚至While(true)，但在setState之后它只是打破了。我也尝试了递归，一次通话后也停止了。

class _HomePageState extends State<HomePage>{

  List<Widget> currentMessages = [];

  Future<void> addText() async {
      await Future.delayed(Duration(seconds: 2));
      setState((){
        currentMessages.add(Text("It works?"));
      });
  }

  @override
  Widget build(BuildContext context) {

    addText();

    return Scaffold(
      body: Center(
        child: ListView(
          children: (currentMessages.isEmpty ? <Widget>[Container()]:currentMessages),
        ),
      )
    );
  }
}

Answer 1

这应该工作。

class _SOState extends State<SO> {
  List<Widget> currentMessages = [];

  Timer timer;

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

    const twoSec = const Duration(seconds: 2);
    timer = new Timer.periodic(twoSec, (Timer t) {
      setState(() {
        currentMessages.add(Text("It works?"));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemCount: currentMessages.length,
          itemBuilder: (BuildContext context, int index) {
            if (currentMessages.length == 0) return Container();
            return currentMessages[index];
          },
        ),
      ),
    );
  }

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

不知道为什么ListView不会更新您的代码更改。所以我使用了builder。

Answer 2

覆盖initState和dispose并分别创建和取消每个计时器。例如：

class MyAppState extends State<MyApp> {
  Timer t;

  @override
  void initState() {
    super.initState();
    t = Timer.periodic(
      Duration(seconds: 1),
      (_) {
        setState(() {
          // do something here that will happen every second
        });
      },
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}