Flutter - 如何在 ListView 构建器中列出 forEach() 值？答案

【问题标题】：Flutter - How to list out forEach() value in ListView builder?Flutter - 如何在 ListView 构建器中列出 forEach() 值？
【发布时间】：2020-02-22 13:47:21
【问题描述】：

您好，我正在尝试将数据从 JSON 列出到 Listview Builder 。但是 Flutter 给了我这个错误：Column's children must not contain any null values, but a null value was found at index 0

我试图在列表视图中像这样映射每一个

alo[Index]['rewards'].forEach((k, v) {
                      Text(v['name']);
                    }),

这是我的完整代码：

            shrinkWrap: true,
            itemCount: alo.length,
            itemBuilder: (BuildContext ctxt, int Index) {
              return Card(
                  child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  children: <Widget>[
                    alo[Index]['rewards'].forEach((k, v) {
                      Text(v['name']);
                    }),


                  ],
                ),
              ));
            });

有什么解决办法吗？谢谢！

【问题讨论】：

标签： flutter dart

【解决方案1】：

问题是 forEach() 不返回任何内容，您可以使用 map() 代替，如下所示：

children: alo[Index]['rewards'].values.map<Widget>((v) => Text(v['name'])).toList()

如果你想添加更多小部件，你可以这样做：

Column(
  children: <Widget>[
    Column(
      children: alo[Index]['rewards']
          .values
          .map<Widget>((v) => Text(v['name']))
          .toList(),
    ),
    Text('Other widget'),
  ],
)

【讨论】：

我得到了一些列表，但其余的返回此错误：在 null 上调用了 getter 'values'。如何处理空值？
您返回的是一张有奖励的卡片，所以如果没有奖励，则返回您想要的任何其他内容。因此，如果 alo[Index]['rewards'] 不为空，则返回卡片，就像您现在所做的那样，否则返回您想要显示的任何内容，如果它没有奖励。
我可以用其他方法代替map() ? Because I want to have another widgets such as text widget. with map 方法吗？我不能添加另一个小部件
我不明白，使用地图，您将返回值的每个元素所需的任何小部件的列表。
我根据您的要求更新了我的答案。

【解决方案2】：

你有两种选择，如果你没有任何奖励，那么你可以

a) 留下一张空卡片

        shrinkWrap: true,
        itemCount: alo.length,
        itemBuilder: (BuildContext ctxt, int Index) {
          return Card(
              child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: <Widget>[
              alo[Index]['rewards']!=null?
                alo[Index]['rewards'].forEach((k, v) {
                  return Text(v['name']);
                }):SizedBox()


              ],
            ),
          ));
        });

或

b) 不渲染任何卡片

        shrinkWrap: true,
        itemCount: alo.length,
        itemBuilder: (BuildContext ctxt, int Index) {
          return alo[Index]['rewards']!=null?Card(
              child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: <Widget>[
                alo[Index]['rewards'].forEach((k, v) {
                  return Text(v['name']);
                }),


              ],
            ),
          )):SizedBox();
        });

【讨论】：

仍然返回错误。我已经确认 alo[Index]['rewards'] 不为空，因为我在 initState 函数中尝试过。
对不起，但是，您是否“返回”了 foreach 函数中的文本项？
哦，我的一些奖励是空的，所以这就是原因