Flutter中将服务返回的JSON数据映射为指定格式的实现求助

1. 将JSON转换为目标Map<String, List<String>>格式 #

首先导入dart:convert处理JSON解析，然后通过遍历分组构建目标结构：

import 'dart:convert';

// 修正格式后的原始JSON数据（移除末尾多余逗号）
final String rawJson = '''
[ 
  {"MAH_ID" : 10, "MAH_AD":"AŞAĞI", "ILCE_ID": 1, "ILCE_AD" : "SARI"}, 
  {"MAH_ID" : 11, "MAH_AD":"YUKARI", "ILCE_ID" : 1, "ILCE_AD" : "SARI"}, 
  {"MAH_ID" : 12, "MAH_AD" :"SAĞ", "ILCE_ID" : 1, "ILCE_AD" : "SARI"}, 
  {"MAH_ID" : 13, "MAH_AD" :"SOL", "ILCE_ID" : 1, "ILCE_AD" : "SARI"}, 
  {"MAH_ID" : 14, "MAH_AD" :"LOW", "ILCE_ID" : 2, "ILCE_AD" : "KIRMIZI"}, 
  {"MAH_ID" : 15, "MAH_AD" :"MİD", "ILCE_ID" : 2, "ILCE_AD" : "KIRMIZI"}, 
  {"MAH_ID" : 16, "MAH_AD" :"HİGH", "ILCE_ID" : 2, "ILCE_AD" : "KIRMIZI"}, 
  {"MAH_ID" : 17, "MAH_AD" :"ULTRAHİGH", "ILCE_ID" : 2, "ILCE_AD" : "KIRMIZI"}
]
''';

// 转换函数：按ILCE_AD分组，收集对应的MAH_AD列表
Map<String, List<String>> getGroupedMahs() {
  final List<dynamic> decodedList = jsonDecode(rawJson);
  Map<String, List<String>> groupedMap = {};

  for (var item in decodedList) {
    String ilceAd = item['ILCE_AD'];
    String mahAd = item['MAH_AD'];

    // 不存在分组时初始化空列表
    if (!groupedMap.containsKey(ilceAd)) {
      groupedMap[ilceAd] = [];
    }
    groupedMap[ilceAd]!.add(mahAd);
  }

  return groupedMap;
}

2. Flutter中展示分组数据 #

方式一：可展开分组列表（使用ExpansionTile） #

适合需要折叠/展开分组的场景：

class GroupedMahList extends StatefulWidget {
  const GroupedMahList({super.key});

  @override
  State<GroupedMahList> createState() => _GroupedMahListState();
}

class _GroupedMahListState extends State<GroupedMahList> {
  late Map<String, List<String>> _groupedMahs;

  @override
  void initState() {
    super.initState();
    _groupedMahs = getGroupedMahs();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mahalle Grupları')),
      body: ListView.builder(
        itemCount: _groupedMahs.keys.length,
        itemBuilder: (context, index) {
          String ilceAd = _groupedMahs.keys.elementAt(index);
          List<String> mahs = _groupedMahs[ilceAd]!;

          return ExpansionTile(
            title: Text(ilceAd),
            children: mahs.map((mahAd) {
              return ListTile(title: Text(mahAd));
            }).toList(),
          );
        },
      ),
    );
  }
}

方式二：平铺分组列表 #

适合直接展示所有分组内容的场景：

class GroupedMahList extends StatefulWidget {
  const GroupedMahList({super.key});

  @override
  State<GroupedMahList> createState() => _GroupedMahListState();
}

class _GroupedMahListState extends State<GroupedMahList> {
  late Map<String, List<String>> _groupedMahs;

  @override
  void initState() {
    super.initState();
    _groupedMahs = getGroupedMahs();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mahalle Grupları')),
      body: SingleChildScrollView(
        child: Column(
          children: _groupedMahs.entries.map((entry) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    entry.key,
                    style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                ),
                ...entry.value.map((mahAd) {
                  return ListTile(title: Text(mahAd));
                }),
              ],
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键注意事项 #

• 原始JSON末尾的多余逗号会导致解析报错，需提前移除。
• 如果JSON来自网络请求，需在异步函数中处理：通过await http.get获取数据后再解码转换。

内容的提问来源于stack exchange，提问作者Uğur DANA