setState不会更新用户界面 [英] setState doesn't update the user interface

问题描述

在使用有状态的小部件时，我遇到了一些与setState函数有关的问题，这些小部件在计时器的帮助下自行更新。下面的代码显示了2个主要类，它们复制了我如何找到此错误的方法。文本小部件 Lorem应该在10秒内插入-确实是-但从未显示。我尝试调试数组 Items，并在5秒后确实包含了 lorem文本窗口小部件。 build函数可以运行，但在用户界面中没有任何区别。

I've been facing some problems related to the setState function while using Stateful Widgets that updates itself with the help of Timers. The code below show 2 main classes that replicate how I came to find this error. The Text Widget "Lorem" should be inserted within 10 seconds - and it is - but it's never shown. I tried to debug the array "Items" and it does contain the "lorem" Text Widget after 5 seconds, as it should. The "build" function runs but doesn't make any difference in the UI.

class textList extends StatefulWidget {

  @override
  State<StatefulWidget> createState() =>
      new _textListState();
}

class _textListState extends State<textList>
    with TickerProviderStateMixin {

  List<Widget> items = new List();
  Widget lorem = new textClass("Lorem");
  Timer timer;

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

    items.add(new textClass("test"));
    items.add(new textClass("test"));

    timer = new Timer.periodic(new Duration(seconds: 5), (Timer timer) {
      setState(() {
        items.removeAt(0);
        items.add(lorem);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    Iterable<Widget> content = ListTile.divideTiles(
        context: context, tiles: items).toList();

    return new Column(
      children: content,
    );
  }
}

class textClass extends StatefulWidget {
  textClass(this.word);

  final String word;

  @override
  State<StatefulWidget> createState() =>
      new _textClass(word);
}

class _textClass extends State<textClass>
    with TickerProviderStateMixin {
  _textClass(this.word);

  String word;
  Timer timer;

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

    timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
      setState(() {
        word += "t";
      });
    });
  }

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


  @override
  Widget build(BuildContext context) {
    return new Text(word);
  }
}

这不是我发现此错误的方法，但这是复制它的最简单方法。主要思想是：子文本应该不断更新自身（在这种情况下，最后要添加 t），并且在5秒钟后，应将最后一个替换为文本小部件 Lorem，这会发生什么情况

This is not how I came to find this error but this is the simplest way to replicate it. The main idea is: The children texts should keep updating themselves (in this case, adding "t"s in the end) and, after 5 seconds, the last of them should be replaced for the Text Widget "Lorem", what does happen in the list but not in the UI.

推荐答案

这是怎么了：

• 状态 State 永远不应具有任何构造函数参数。使用 widget 属性可访问关联的 StatefulWidget 的最终属性。


• Flutter正在重用您的 _textClass 实例，因为类名和键匹配。这是一个问题，因为您只在 initState 中设置了 widget.word ，所以您没有拿起新的 word 配置信息。您可以通过为 StatefulWidget 实例赋予唯一键来消除歧义并导致旧的 State 被处置来解决此问题，或者您可以保留旧的 State 并实施 didUpdateWidget 。后一种方法如下所示。

• A State should never have any constructor arguments. Use the widget property to get access to final properties of the associated StatefulWidget.
• Flutter is reusing your _textClass instance because the class name and keys match. This is a problem since you only set widget.word in initState so you're not picking up the new word configuration information. You can fix this either by giving the StatefulWidget instances unique keys to disambiguate them and cause the old State to be disposed, or you can keep around the old State and implement didUpdateWidget. The latter approach is shown below.

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

void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new textList(),
    ),
  ));
}

class textList extends StatefulWidget {

  @override
  State<StatefulWidget> createState() =>
      new _textListState();
}

class _textListState extends State<textList>
    with TickerProviderStateMixin {

  List<Widget> items = new List();
  Widget lorem = new textClass("Lorem");
  Timer timer;

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

    items.add(new textClass("test"));
    items.add(new textClass("test"));

    timer = new Timer.periodic(new Duration(seconds: 5), (Timer timer) {
      setState(() {
        items.removeAt(0);
        items.add(lorem);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    Iterable<Widget> content = ListTile.divideTiles(
        context: context, tiles: items).toList();

    return new Column(
      children: content,
    );
  }
}

class textClass extends StatefulWidget {
  textClass(this.word);

  final String word;

  @override
  State<StatefulWidget> createState() =>
      new _textClass();
}

class _textClass extends State<textClass>
    with TickerProviderStateMixin {
  _textClass();

  String word;
  Timer timer;

  @override
  void didUpdateWidget(textClass oldWidget) {
    if (oldWidget.word != widget.word) {
      word = widget.word;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void initState() {
    super.initState();
    word = widget.word;

    timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
      setState(() {
        word += "t";
      });
    });
  }

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


  @override
  Widget build(BuildContext context) {
    return new Text(word);
  }
}

这篇关于setState不会更新用户界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！