如何在Flutter Widget中遍历异步方法返回的Map类型数据？

1. 先修复Map遍历的写法问题 #

你当前的遍历写法无效，因为Map.forEach没有返回值，无法生成Widget列表。正确的做法是用Map.entries.map()把键值对转换成Widget集合，再转为List：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Customer')),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: isReady 
          ? value.entries.map((entry) => Text('${entry.key}: ${entry.value}')).toList()
          : const [CircularProgressIndicator()], // 加载状态组件
    ),
  );
}

2. 更优雅的异步数据处理方案：使用FutureBuilder #

手动维护isReady和value变量不够灵活，推荐用FutureBuilder自动处理异步请求的生命周期，无需手动管理状态：

步骤1：修改异步方法，让它返回Future #

Future<Map<String, String>> getData() async {
  try {
    return await CustomerData().getService(selectedService);
  } catch (e) {
    print(e);
    rethrow; // 抛出异常让FutureBuilder捕获
  }
}

步骤2：在build中使用FutureBuilder #

@override
Widget build(BuildContext context) {
  // 避免每次build重复发起请求，可把Future存在State变量中，在initState初始化
  late final Future<Map<String, String>> _dataFuture = getData();
  
  return Scaffold(
    appBar: AppBar(title: const Text('Customer')),
    body: FutureBuilder<Map<String, String>>(
      future: _dataFuture,
      builder: (context, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 请求失败状态
        if (snapshot.hasError) {
          return Center(child: Text('请求失败: ${snapshot.error}'));
        }
        // 请求成功状态，遍历Map生成Widget
        final data = snapshot.data ?? {};
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: data.entries
              .map((entry) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text('${entry.key}: ${entry.value}'),
                  ))
              .toList(),
        );
      },
    ),
  );
}

关键注意点 #

• 将Future对象存储在State变量中，避免每次组件重建时重复发起异步请求。
• 处理snapshot.data为空的情况，用?? {}兜底防止空指针异常。

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