Flutter中如何在Column组件内展示Map类型存储的数据？

直接遍历profile这个Map的键值对，把每组字段转成对应的Widget塞进Column的children列表就能实现，不需要额外引入第三方依赖。

基础实现方式 #

利用Dart集合的map方法遍历Map的entries（存储所有键值对的集合），将每组键值对映射为展示组件，最后通过toList()转成Column要求的Widget列表即可。
修改后的完整可运行代码：

class _HomePageState extends State<HomePage> {

  final Map<String, String> profile = {
    'name': '张三',
    'date of birth': '1999-01-01',
    'profile update date': '2024-05-20',
  };
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('个人资料')),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 遍历Map逐行生成个人资料项
            ...profile.entries.map((entry) {
              return Container(
                width: double.infinity,
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: const BoxDecoration(
                  border: Border(bottom: BorderSide(color: Colors.grey, width: 0.5))
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // 左侧字段名，浅灰色弱化显示
                    Text(
                      entry.key,
                      style: const TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                    // 右侧字段值，加粗突出
                    Text(
                      entry.value,
                      style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                    )
                  ],
                ),
              );
            }).toList()
          ],
        ),
      ),
    );
  }
}

样式优化方案 #

如果想要更符合Material Design的规范样式，每一行可以直接用内置的ListTile组件替换自定义Container，自带标准间距、点击事件、图标插槽，代码更简洁：

// 直接替换Column children里的遍历逻辑即可
...profile.entries.map((entry) {
  return ListTile(
    contentPadding: EdgeInsets.zero,
    title: Text(entry.key),
    trailing: Text(entry.value),
  );
}).toList()

开发注意事项 #

• 遍历生成的组件如果要直接嵌入children列表，记得在map表达式前加...展开运算符，或者把map后的结果先赋值给变量再传入，否则会报类型不匹配错误
• 普通Map的默认遍历顺序和键值对插入顺序完全一致，如果需要调整字段展示顺序，可以提前对profile.entries做排序处理再遍历
• 如果要给特定字段加特殊样式（比如头像位、跳转箭头），遍历的时候通过entry.key判断字段名，单独返回对应自定义组件就行

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