Question

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

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

每按一次floatActionButton，计数就会增加

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

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

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

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

简而言之，如何使此代码与childrenAdded方法一起使用？缺少什么？

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

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用ListView.builder
对于演示，我添加了Widget2和其他图标
代码段

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,
    );
  }
}

将窗口小部件添加到列表时，Flutter ListView无法正常工作

1 个答案: