时间戳

首页 > 解决方案 > Flutter：在 initState() 中定期调用 list.add() 会导致 build() 运行，但更新后的列表未显示在屏幕上

flutter - Flutter：在 initState() 中定期调用 list.add() 会导致 build() 运行，但更新后的列表未显示在屏幕上

问题描述

在屏幕上，我希望看到一个不断增长的列表：

但它只是黑色的。如果我突然在 Android Studio 中按下 CTRL+S，最终会显示整个列表。

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Widget> list = [];

  @override
  Widget build(BuildContext context) {
    print('${list.length}');
    return MaterialApp(
      home: ListView(
        children: list,
      ),
    );
  }

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

    new Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        list.add(Text('${list.length}', key: Key(list.length.toString())));
      });
    });
  }
}

起初我以为是因为我没有设置关键属性，但我添加了它，仍然没有。

我知道每秒钟都会触发一次 build() 属性，因为我看到 print() 语句显示了调试运行选项卡输出中的数字。

我在这里想念什么？它必须是简单的东西！

标签： flutter

解决方案

有趣的发现。

实际上导致您的 UI 不更新的原因是对list变量的引用保持不变。

添加元素不会更改引用，并且ListView似乎基于引用工作。

有两种方法可以确认这一点。

  1. 将您的小部件更改ListView为更简单的Column小部件，瞧，它正在正确更新。

  2. 更改您的更新方法。销毁引用并List像这样新建一个，

    list = [...list, Text('${list.length}')];

    再一次，惊喜。

推荐阅读