listview - 将小部件添加到 List 时 Flutter ListView 无法正常工作
问题描述
我的代码中有两个 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
解决方案
您可以在下面复制粘贴运行完整代码
您可以使用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,
);
}
}
推荐阅读
- php - 组合框 foreach 上的是或否 - CodeIgniter
- java-8 - Java 8 - 根据列表中的最新修改日期时间过滤条目(具有重复条目)
- c# - `this[object Key]` 无限数量的参数
- ocaml - 无法使用 Ocamlbuild 构建
- verilog - 如何在 Verilog 模块中处理文本文件作为输入?
- android - 如何堆叠碎片?
- sql - 在sql server中将行/表记录转换为json文档
- sql - 从左表 Sql 服务器加入单条记录
- python-3.x - 如何使用 python API 限制 bing 视觉搜索以从自定义/特定网站获取结果?
- java - 用 java 8 替换空检查可选