Flutter嵌套表头展示问题：数据无法关联对应层级求助

你的问题核心是没有对JSON数据进行按国家+场地的层级分组，导致UI无法正确关联主Header、子Header和对应的赛事记录。以下是具体的排查和修复步骤：

1. 先做数据层级分组 #

首先需要将扁平的JSON数据转换成国家代码 -> 场地 -> 赛事列表的嵌套结构，这是正确展示的前提。

步骤1：定义数据模型 #

先把JSON数据解析成Dart实体类（假设你的JSON字段包含countryCode、venue、matchName等）：

class Match {
  final String countryCode;
  final String venue;
  final String matchName;
  // 其他赛事字段（如比分、时间等）

  Match({
    required this.countryCode,
    required this.venue,
    required this.matchName,
    // 对应其他字段的初始化
  });

  // 从JSON解析的工厂方法
  factory Match.fromJson(Map<String, dynamic> json) {
    return Match(
      countryCode: json['countryCode'],
      venue: json['venue'],
      matchName: json['matchName'],
      // 解析其他字段
    );
  }
}

步骤2：实现分组逻辑 #

编写分组函数，将原始赛事列表转换成嵌套的Map结构：

Map<String, Map<String, List<Match>>> groupMatches(List<Match> rawMatches) {
  final groupedData = <String, Map<String, List<Match>>>{};

  for (final match in rawMatches) {
    // 初始化国家分组
    if (!groupedData.containsKey(match.countryCode)) {
      groupedData[match.countryCode] = <String, List<Match>>{};
    }
    final countryGroup = groupedData[match.countryCode]!;

    // 初始化场地分组
    if (!countryGroup.containsKey(match.venue)) {
      countryGroup[match.venue] = <Match>[];
    }
    // 将赛事添加到对应场地的列表中
    countryGroup[match.venue]!.add(match);
  }

  return groupedData;
}

2. 嵌套UI展示分组后的数据 #

使用ExpansionTile（支持展开收起）或者普通嵌套ListView来实现层级展示：

class MatchListView extends StatelessWidget {
  final List<Match> matches;

  const MatchListView({super.key, required this.matches});

  @override
  Widget build(BuildContext context) {
    final groupedData = groupMatches(matches);

    return ListView.builder(
      itemCount: groupedData.keys.length,
      itemBuilder: (context, countryIdx) {
        // 获取当前国家代码
        final countryCode = groupedData.keys.elementAt(countryIdx);
        // 获取该国家下的所有场地分组
        final venueGroups = groupedData[countryCode]!;

        return ExpansionTile(
          // 主Header：国家代码
          title: Text(countryCode, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
          children: venueGroups.entries.map((venueEntry) {
            final venue = venueEntry.key;
            final venueMatches = venueEntry.value;

            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 子Header：场地
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text(venue, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
                ),
                // 该场地的赛事记录列表
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: venueMatches.length,
                  itemBuilder: (context, matchIdx) {
                    final match = venueMatches[matchIdx];
                    return ListTile(
                      title: Text(match.matchName),
                      // 这里添加其他赛事信息（如比分、时间等）
                      subtitle: const Text("赛事详情"),
                    );
                  },
                ),
              ],
            );
          }).toList(),
        );
      },
    );
  }
}

3. 常见错误排查 #

• 未做数据分组：直接遍历原始扁平列表，导致每个赛事都重复显示国家和场地，这是最容易犯的错误。
• 分组逻辑错误：比如分组时key值大小写不匹配（JSON返回"ind"但代码里用"IND"判断），或者分组顺序颠倒（先按场地再按国家）。
• UI布局溢出：内层ListView没有设置shrinkWrap: true和physics: NeverScrollableScrollPhysics()，导致嵌套滚动冲突或布局溢出。

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