Flutter中如何在ListView.builder中使用Map的Key和Value

要在Card的Text组件中显示Map的Key和Value，核心是先将Map的键值对转换为可通过索引访问的列表——因为Map本身不支持直接通过下标获取元素。以下是修改后的完整代码：

Widget build(BuildContext context) {
  Map<String, double> mymap = {
    'Provision': 6300,
    'Food': 3230,
    'shopping': 5039,
    'petrol': 1323
  };
  // 将Map的键值对转换为列表，方便通过索引访问
  final mapEntries = mymap.entries.toList();

  return ListView.builder(
    itemCount: mymap.length,
    itemBuilder: (context, index) {
      // 获取当前索引对应的键值对
      final entry = mapEntries[index];
      return Card(
        child: Container(
          height: 100,
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 显示Key
              Text(
                entry.key,
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // 显示Value，可格式化数值（比如去掉小数位）
              Text(
                '${entry.value.toStringAsFixed(0)}',
                style: TextStyle(fontSize: 16, color: Colors.grey[600]),
              ),
            ],
          ),
        ),
      );
    },
  );
}

关键说明： #

• 转换Map为列表：使用mymap.entries.toList()将Map的所有键值对（MapEntry类型）转换为列表，这样就能通过index直接获取对应位置的键值对。
• 获取键和值：通过entry.key拿到当前项的Key，entry.value拿到对应的Value，直接传入Text组件即可。
• 优化显示：可以给Text添加样式区分键值，或者用toStringAsFixed(0)确保数值显示为整数，提升UI美观度。

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