如何从嵌套List<Object>中获取数据并在Widget组件上展示

该方案完全可行，同时可以结合实际使用场景做部分优化。

实现注意事项 #

• 首先建议补全userList的泛型声明，避免后续取值出现类型异常：
  把原来的List userList修改为List<Map<String, dynamic>> userList
• 不需要用Container手动封装卡片效果，Flutter内置的Card组件已经自带卡片所需的阴影、内边距、圆角等默认样式，直接使用即可
• 从Map中取值时注意键名大小写和你定义的完全一致，避免空值报错，建议对可能为空的字段做默认值处理

基础实现示例 #

你可以直接把List.generate生成的组件列表传入ListView或者Column的children属性中，示例代码如下：

ListView(
  children: List.generate(userList.length, (index) {
    final userItem = userList[index];
    return Card(
      margin: const EdgeInsets.all(10),
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '${userItem['NAME']} ${userItem['SURNAME']}',
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 5),
            Text('提交日期：${userItem['DATE']}'),
            const SizedBox(height: 10),
            Text(userItem['DESCRIPTION'] ?? '无描述信息'),
          ],
        ),
      ),
    );
  }),
)

优化建议 #

如果你的userList数据量较大（超过20条），更推荐直接用ListView.builder实现，它自带懒加载机制，只会渲染当前屏幕视口内的元素，性能开销远低于先全量生成所有组件再传入列表的方案，写法也更简洁：

ListView.builder(
  itemCount: userList.length,
  padding: const EdgeInsets.all(10),
  itemBuilder: (context, index) {
    final userItem = userList[index];
    return Card(
      margin: const EdgeInsets.only(bottom: 10),
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '${userItem['NAME']} ${userItem['SURNAME']}',
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 5),
            Text('提交日期：${userItem['DATE']}'),
            const SizedBox(height: 10),
            Text(userItem['DESCRIPTION'] ?? '无描述信息'),
          ],
        ),
      ),
    );
  },
)

内容的提问来源于stack exchange，提问作者peakystewie