将小部件添加到 List 时 Flutter ListView 无法正常工作

Question

我的代码中有两个 ListView 小部件。一个显示以这种方式创建的列表 (childrenGenerated)：

List<Widget> childrenGenerated = List.generate(count, (int i) => Widget1());

每次按下floatingActionButton时计数都会增加

第二个 ListView 显示了一个列表，该列表在有状态小部件中初始化为空，并在每次按下 floatingActionButton 时使用新添加的小部件进行更新：

onPressed: () {
          setState(() {
            count++;           <-- incremented for childrenGenerated
            childrenAdded.add( <-- Widget1 added.
              Widget1(),
            );
          });
        },

我已打印出两个列表的结果，childrenAdded 看起来与 childrenGenerated 完全相同（包括当我使用调试器时...完全相同）但是，在 listView 中，实际上只呈现了 childrenGenerated。

我注意到的不同之处在于，当为 childrenGenerated 生成列表时，会看到“输入的小部件”打印输出，表明它已被实例化......但是，对于 childrenAdded 版本不会发生这种情况。

简而言之，如何使这段代码与 childrenAdded 方法一起工作？缺少什么？

我创建了一个 dartpad 来显示我所看到的：https://dartpad.dev/d31da0c9b9d913de26ba3420074ddb07

Answer 1

您可以在下面复制粘贴运行完整代码
你可以使用ListView.builder
对于演示，我用不同的图标添加Widget2
代码sn-p

ListView.builder(
                scrollDirection: Axis.vertical,
                itemCount: childrenAdded.length,
                itemBuilder: (BuildContext context, int index) {
                  return childrenAdded[index];
                })

工作演示

完整代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> childrenAdded = [];
  int count = 0;
  @override
  Widget build(BuildContext context) {
    List<Widget> childrenGenerated = List.generate(count, (int i) => Widget1());
    print("childrenGenerated:$childrenGenerated");
    print("childrenAdded:$childrenAdded");
    print("----------------");
    return Scaffold(
      appBar: AppBar(title: Text('some title')),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: childrenGenerated,
              scrollDirection: Axis.vertical,
            ),
          ),
          Expanded(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                itemCount: childrenAdded.length,
                itemBuilder: (BuildContext context, int index) {
                  return childrenAdded[index];
                }),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            count++;
            childrenAdded.add(
              Widget2(),
            );
          });
        },
      ),
    );
  }
}

class Widget1 extends StatelessWidget {
  const Widget1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("entered widget");
    return Icon(
      Icons.image,
      size: 50,
    );
  }
}

class Widget2 extends StatelessWidget {
  const Widget2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("entered widget");
    return Icon(
      Icons.ac_unit,
      size: 50,
    );
  }
}