Flutter如何显示JSON嵌套ArrayList DayList中的DayName、TimeFrom等数据

以下基于你已完成接口请求、PartnerData层级数据解析渲染的前提，给出嵌套DayList数组的渲染实现：

方式1：列表项内直接展示所有日程 #

适合DayList数据量不大的场景，每个合作方条目下直接展示全部营业时间：

ListView.builder(
  itemCount: partnerDataList.length,
  itemBuilder: (context, index) {
    final partnerItem = partnerDataList[index];
    return Card(
      margin: const EdgeInsets.all(10),
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 原有已实现的合作方基础信息
            Text(partnerItem.partnerName, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 4),
            Text(partnerItem.partnerAddress),
            const SizedBox(height: 8),
            // 新增嵌套DayList渲染部分
            const Text("营业时间：", style: TextStyle(fontWeight: FontWeight.w500)),
            const SizedBox(height: 4),
            // 遍历DayList生成对应UI
            ...partnerItem.dayList.map((dayItem) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 2),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(dayItem.dayName),
                    Text("${dayItem.timeFrom} - ${dayItem.timeTo}"),
                  ],
                ),
              );
            }).toList(),
            // 空值兼容逻辑（可选）
            if(partnerItem.dayList.isEmpty) const Text("暂无营业时间信息")
          ],
        ),
      ),
    );
  }
)

方式2：点击展开/收起日程 #

适合DayList数据量较大的场景，默认不占用多余高度，用户点击才展开内容：

ListView.builder(
  itemCount: partnerDataList.length,
  itemBuilder: (context, index) {
    final partnerItem = partnerDataList[index];
    return Card(
      margin: const EdgeInsets.all(10),
      child: ExpansionTile(
        title: Text(partnerItem.partnerName, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
        subtitle: Text(partnerItem.partnerAddress),
        children: partnerItem.dayList.map((dayItem) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(dayItem.dayName),
                Text("${dayItem.timeFrom} - ${dayItem.timeTo}"),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
)

注意事项 #

• 确保数据模型已正确解析嵌套数组，核心解析逻辑参考：

  class PartnerData {
    final String partnerName;
    final String partnerAddress;
    final List<DayItem> dayList;
  
    factory PartnerData.fromJson(Map<String, dynamic> json) {
      // 嵌套数组解析核心代码
      var dayListJson = json['DayList'] as List;
      List<DayItem> parsedDayList = dayListJson.map((item) => DayItem.fromJson(item)).toList();
  
      return PartnerData(
        partnerName: json['PartnerName'],
        partnerAddress: json['PartnerAddress'],
        dayList: parsedDayList,
      );
    }
  }
  
  class DayItem {
    final String dayName;
    final String timeFrom;
    final String timeTo;
  
    factory DayItem.fromJson(Map<String, dynamic> json) {
      return DayItem(
        dayName: json['DayName'],
        timeFrom: json['TimeFrom'],
        timeTo: json['TimeTo'],
      );
    }
  }
  

• 若接口返回的字段名大小写、命名和示例不一致，需要对应调整fromJson方法里的key值
• 需要格式化时间展示的话可以引入intl包处理，直接展示原始时间无需额外依赖

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